I have the following example.json file:
[
{
"interests": [
{
"item": "art"
},
{
"item": "literature"
},
{
"item": "history"
},
{
"item": "science"
}
]
},
{
"experience": [
{
"year": "novice"
},
{
"year": "experienced"
}
]
}
]
and in my view controller, I read the file like this:
app.controller('ProfileCtrl', ["$scope", "$state", "$http",
function ($scope, $state, $http) {
$http.get('files/example.json').success(function (data)
{
$scope.myjsonobj= data;
});
and in my html view, I am injecting the values like this:
<div ng-controller="ProfileCtrl">
...
<select class="form-control" ng-model="user.favs">
<option ng-repeat="p in interests.myjsonobj" value="{{p.item}}">{{p.item}}</option>
</select>
question:
How can I show only the list of values of "interests" in my dropdown menu? How can I access the nested json array in angularjs?
my current setup is not working.
assuming 'interests' is your controller shortname.
you can use:
<option ng-repeat="p in myjsonobj[0].interests" value="{{p.item}}">{{p.item}}</option>
Ideally, you should loop the data object to find the index with the 'interests' key vs hardcoding [0].
update: removed "interests." from the repeat. doesn't seem like you have the ctrl shortname binding.
I'm not an angular guy. But with my javascript knowledge it seems to me that the
"interests.myjsonobj"
should be
"myjsonobj.interests"
Related
I am having a problem with displaying a JSON array objects that I have gotten from a async http request.
I have used ng-repeat to try and display the objects in the view but I am having no luck after many hours. Here is the code I have so far.
index.html
<div class="main" ng-controller = "MyController">
<ul>
<li ng-repeat="item in parks">
<div class="info">
<h2>{{item.parks.name}}<h2>
<h2>{{item.parks.park_size}}<h2>
<h2>{{item.parks.open_times}}<h2>
<h2>{{item.parks.days_closed}}<h2>
<img ng-src="images/{{item.parks.short}}.jpg">
</div>
</li>
controllers.js
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.parks = data;
console.log(data);
});
}]);
data.json
{
"parks": [
{
"park_name": "Central Park",
"park_size": {
"miles": "1.2",
"meters": "1900"
},
"open_times": {
"Monday-Friday": "8am-10pm",
"Saturday-Sunday": "10am-6.30pm"
},
"days_closed": [
"December 25th",
"December 26th"
],
"images": [
{
"short": "centralimage1.jpeg"
},
{
"short": "centralimage2.jpeg"
},
{
"short": "centralimage3.jpeg"
},
{
"short": "centralimage4.jpeg"
}
]
},
{
"park_name": "Riverside Park",
"park_size": {
"miles": "0.2",
"meters": "320"
},
"open_times": {
"Monday-Friday": "7am-9pm",
"Saturday-Sunday": "9am-8.30pm"
},
"days_closed": [
"December 25th",
"December 26th",
"Jamuary 1st"
],
"images": [
{
"short": "riversideimage1.jpeg"
},
{
"short": "riversideimage2.jpeg"
},
{
"short": "riversideimage3.jpeg"
},
{
"short": "riversideimage4.jpeg"
}
]
}
]
}
JS fiddle
https://jsfiddle.net/owxwh0kz/
You are iterating over parks already, so your code can look like this
<li ng-repeat="item in parks">
<div class="info">
<h2>{{item.park_name}}<h2>
(I changed item.park.name to be item.park_name to match your data)
Otherwise check using the Angular inspector to see what the data looks like.
It looks like the data coming back from the json object is not consitent with your binding selectors. Inside an ng-repeat you are alreading interating over the scope of parks.
<li ng-repeat="item in parks">
<div class="info">
<h2>{{item.park_name}}<h2>
<h2>{{item.park_size}}<h2>
<h2>{{item.open_times}}<h2>
<h2>{{item.days_closed}}<h2>
For the images because they are in another array you would have to performn another repeat to grab all images.Note that nested ng-repeats can lead to negative performance impacts.
Based on your code, you should iterate over parks.parks to reach the array of the $scope.parks object.
Also, within the ng-repeat you should use item.* instead of item.parks.*
Here is JSFiddle with the fixed code: https://jsfiddle.net/x0ja420L/
Some code changes has been made in your code :
Proper closing of the HTML tags to work it properly.
Use <h2>{{item.park_name}}</h2> instead of <h2>{{item.park_name}}<h2>
ng-repeat directive iterate the array object so if you want to access park_name you have to use ng-repeat like this ng-repeat="item in parks.parks"
demo !
ng-repeat directive iterate the array object, so if you want to access park_name you have to use ng-repeat like this ng-repeat="item in parks.parks",code should like this
<li ng-repeat="item in parks.parks">
<div class="info">
<h2>{{item.park_name}}<h2>
<h2>{{item.park_size}}<h2>
<h2>{{item.open_times}}<h2>
<h2>{{item.days_closed}}<h2>
<img ng-src="images/{{item.images[0].short}}.jpg">
</div>
</li>
you can see the demo
var foo = [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
},
{
"id": 4,
"name": "Test"
},
{
"id": 5,
"name": "Sample value"
},
{
"id": 6,
"name": "Testvalue"
}
];
I am trying to get a simple search input, which shows a couple of listings on ng-repeat. The search is basically a filter which shows searched items in that listing. What I have achieved is when I search something, with $http, it gets back the whole list of foo, and within that it filters. How can I just get the data with my keyword, and the whole JSON? For example if I search sample, how can I get the objects of id 3 and 5 so that I can display a new set of listings, or if I search with ID number 12, I get the object which has id as 12. The search term will be dynamic. I will be giving a $http call on every search as well.
Thanks.
If I understood well, it should work:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.foo = [
{
"id":12,
"name":"Test"
},
{
"id":2,
"name":"Beispiel"
},
{
"id":3,
"name":"Sample"
},
{
"id":4,
"name":"Test"
},
{
"id":5,
"name":"Sample value"
},
{
"id":6,
"name":"Testvalue"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search" placeholder="Search">
<ul>
<li ng-repeat="item in foo | filter: search">
<span ng-bind-template="{{item.id}} - {{item.name}}"></span>
</li>
</ul>
</body>
</html>
Note: If you want to perform a $http request based on search input, look at this DEMO.
You can use $filter to achieve this.
function YourController($filter) {
var result = $filter('filter')(foo, {"id":3,"id":5});
};
You can iterate result later.
I have following data for drop down in my controller.
$scope.groups={{"gpId": 3, "name" :"Tom"}, {"gpId": 32, "name" :"Helen"},{"gpId": 9, "name" :"Amy"}
$scope.user=
{
tkId: 32;
place: NW
}
In my html I have following select
<select ng-model="user.tkId" ng-options="a.gpId as a.name for a in groups track by a.gpId></select>
When I run this I get drop down with Helen selected but when i want to change the selection from drop down it doesn't let me.
Please let me know how I can change it to select other options so I can save it if needed. Thanks
The following snippet works.
First, an array of objects is written like this [{}, {}]
It's written in the angular docs that track by and as should not be used together.
Don't use select as and track by in the same expression. They're not designed to work together.
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.groups = [{
"gpId": 3,
"name": "Tom"
}, {
"gpId": 32,
"name": "Helen"
}, {
"gpId": 9,
"name": "Amy"
}];
$scope.user = {
tkId: 32,
place: 'NW'
};
}]);
</script>
<div ng-controller="ExampleController">
<label>Group:
<select ng-model="user.tkId" ng-options="group.gpId as group.name for group in groups"></select>
</label>
<br/> {{user.tkId}}
</div>
</body>
I am a newbie to angular js.This might be a piece of cake for many of you.
Could you please guide me?
I have a json file, a view to display, index.html(view), and a controller(index_angular.js).In the image the second and third columns are drop down menus corresponding to the technology id in json.
How to parse the json and display in the view according to the image as its attached.
Thanks in advance.
JSON STRUCTURE:
{
"technology": [
{
"id": "AKC",
"detail": {
"drop1": [
{
"id": "AKC-lst-1231"
},
{
"id": "AKC-lst-1232"
},
{
"id": "AKC-lst-1233"
}
],
"drop2": [
{
"id": "T_AKC_live"
},
{
"id": "T_AKC_Capt"
},
{
"id": "T_AKC_live1"
}
]
}
},
{
"id": "MET",
"detail": {
"drop1": [
{
"id": "MET-2st"
},
{
"id": "MET-34"
}
],
"drop2": [
{
"id": "sd-232"
},
{
"id": "sd-121"
}
]
}
}
]
}
Required Format to display in view in Angular JS:
Coloumn 2 and coloumn 3 are drop down menus of drop1 and drop2 of corresponding technology id
index_angular.js(CONTROLLER)
var myModule=angular.module('test',[]);
myModule.controller("test_controller", function($scope,$http){
$scope.message = "hello world!";
$scope.posts = "";
$scope.init=function(){
$scope.friends = ["Test friends","test1","test2","test4","test5","test6","test7","test8","test9","test10","test11","test12","test13","test113","test14","test114","test15","test133","test23","test33","test35"];
$http.get("test.json").
success(function(data, status, headers, config) {
$scope.posts = data;
alert($scope.posts);
$scope.tech_name=[];
$scope.technology="";
console.log($scope.posts);
var tech_marker_count= $scope.posts.technology.length;
alert(tech_marker_count);//count of technology
for(var tech_marker=0;tech_marker<tech_marker_count;tech_marker++)
{
$scope.tech_name.push($scope.posts.technology[tech_marker].id);
$scope.technology=$scope.posts.technology[tech_marker].id;
alert( $scope.technology);
}
}).
error(function(data, status, headers, config) {
alert("Error fetching data");
// log error
});
};
});
index.html(VIEW)
<div class="view_data">
<ul>
</ul>
</div>
You can take use of ng-repeat that does help you to loop through the json
Your html will look like below,
HTML
<div class="view_data" ng-init="init()">
<div ng-repeat="d in posts.technology|orderBy: 'id'">
{{d.id}}
|<span ng-repeat="drop1Item in d.detail.drop1">{{drop1Item.id}}</span>
|<span ng-repeat="drop2Item in d.detail.drop2">{{drop2Item.id}}</span>
</div>
</div>
Working Plunkr need some styling on it.
Now its turn to do design. Thanks.
I'm currently trying to build a AngularJS app with a complex data structure.
The data source is an array of people with languages and skill level.
I need to filter those people by language skill, to do so I tried to build a select with the languages and another select with the skill levels, but i failed.
Here is a plnkr of my effords
Maybe there is also a simpler/better way to structure the data array ($scope.people)
Take a look at this
Working Demo
Html
<div ng-app='myApp' ng-controller="MainCtrl">LANGUAGES:
<select ng-model="selectLang" ng-options="lang as lang for lang in languages"></select>
<br>SKILL:
<select ng-model="selectSkill" ng-options="skill as skill for skill in skills"></select>
<br>
<button ng-click="getPeople()">Submit</button>
<br>PEOPLE:
<select ng-model="selectPeoples" ng-options="people as people for people in peoples"></select>
</div>
script
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.people = [{
"name": "Jane Doe",
"gender": "Female",
"languages": [{
"lang": "German",
"skill": "Good"
}, {
"lang": "English",
"skill": "Very Good"
}]
}, {
"name": "John Doe",
"gender": "Male",
"languages": [{
"lang": "French",
"skill": "Good"
}, {
"lang": "English",
"skill": "Very Good"
}]
}];
$scope.languages = [];
$scope.skills = [];
angular.forEach($scope.people, function (peopleValue, peopleKey) {
angular.forEach(peopleValue.languages, function (langValue, langKey) {
$scope.languages.push(langValue.lang);
$scope.skills.push(langValue.skill);
});
});
$scope.languages = _.uniq($scope.languages);
$scope.skills = _.uniq($scope.skills);
$scope.getPeople = function () {
$scope.peoples = [];
angular.forEach($scope.people, function (peopleValue, peopleKey) {
angular.forEach(peopleValue.languages, function (langValue, langKey) {
if (langValue.lang === $scope.selectLang && langValue.skill === $scope.selectSkill) {
$scope.peoples.push(peopleValue.name);
}
});
});
}
});
Your problem is that you're not actually looping through each person's languages array in your ng-options directive. And I don't believe such a thing is actually possible given how your data is structured. I don't think you can loop through nested arrays (or at least I'm not aware of any ng-options syntax that would allow for such a thing.
So to make things easier, I would suggest doing the following in your controller:
$scope.langs = [];
angular.forEach($scope.people, function(person){
angular.forEach(person.languages, function(lang){
$scope.langs.push({
lang: lang.lang,
skill: lang.skill,
name: person.name,
gender: person.gender
});
});
});
This will give you an array that will allow you to filter using ng-options with the `orderBy' filter.