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
Related
I'm trying to figure out on how to iterate the array using ngrepeat
If I have a array of data like below
{
"People": [{
"name": "Andrew Amernante",
"rating": 3,
},
{
"name": "Frank Wang",
"rating": 5,
},
{
"name": "Chang Wang",
"rating": 5,
}
]
}
In Controller, I have these code snippets.
app.controller('mainController', function($scope, $http) {
$http.get('people.json').
then(function onSuccess(response) {
console.log(response);
$scope.peoples = response.data;
}).
catch(function onError(response) {
console.log(response);
});
});
And, I wanted to iterate the array and display the three name in list.
<ul class="nav">
<li ng-repeat="obj.peoples track by $index">
{{obj.name}}
</li>
</ul>
But, I cannot able to get the names, any idea on this?
FYI - I'm using Angular 1.6.5 version here.
Plunkr Code here
You need to fix your HTML code.
Instead of ng-repeat="obj.peoples track by $index" it should be ng-repeat="obj in peoples.People track by $index"
See below demo.
angular.module('app', [])
.controller('mainController', function($scope, $http) {
// mocked, equivalente to `$scope.peoples = response.data`
$scope.peoples = {
"People": [{
"name": "Andrew Amernante",
"rating": 3,
},
{
"name": "Frank Wang",
"rating": 5,
},
{
"name": "Chang Wang",
"rating": 5,
}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainController'>
<ul class="nav">
<li ng-repeat="obj in peoples.People track by $index">
{{obj.name}}
</li>
</ul>
</div>
it is peoples in your script.js and you are using obj in html
$http.get('people.json').
then(function onSuccess(response) {
console.log(response);
$scope.peoples = response.data;
}).
change your html to the below code,
<li class="active" ng-repeat="item in peoples.People">
{{item.name}}<span class="glyphicon glyphicon-play"></span>
</li>
Two things, in javscript
$scope.peoples = response.data.People;
and in ng-repeat it should be
ng-repeat="people in peoples track by $index"
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"
I am trying to implement chips style.
Adding tags and remove tags like chips style to an item, for that I need to split string and bind separately based on length of array of split.
How to split comma speared dynamic length string while binding data.
how can I use angular filters here
Please check following code.
JS: Controller:
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
var temp= {
"values": [
{
"id": "1",
"tags": "Design research, UI Frameworks, Wireframes"
},
{
"id": "2",
"tags": "Hockey, basketball, Cricket, Football, Baseball"
},
{
"id": "3",
"tags": "Sensors, maps, Location Service, Studio"
},
],
"count": "3"
};
// I have json like this
$scope.items = temp.values;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" >
<div ng-controller ="myCtrl">
<p ng-repeat="item in items">
<span>{{item.tags}}</span>
</p>
</div>
<hr>
<!-- here I am trying implement chips style -->
<!-- Requieremrnt-->
<span style="background:#ddd;">{{item.tags[0]}}</span>
<span style="background:#ddd;">{{item.tags[1]}}</span>
<span style="background:#ddd;">{{item.tags[n]}}</span>
<!-- can I use ng-repeat or custom filter. if yes how??-->
<hr>
</body>
Can I use ng-repeat or custom filter. if yes how??
Thanks.
There is no need to create a custom filter to do so (although you can if you want to).
For this particular purpose, you can split the tags in your controller and then simply iterate through the strings in your view. In this case we'll use a double ng-repeat. The first one to iterate through all group of strings in each set of tags and the second one to iterate through the split string items. I've modified your code below and cleaned it up a bit.
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
var temp= {
"values": [
{
"id": "1",
"tags": "Design research, UI Frameworks, Wireframes"
},
{
"id": "2",
"tags": "Hockey, basketball, Cricket, Football, Baseball"
},
{
"id": "3",
"tags": "Sensors, maps, Location Service, Studio"
},
],
"count": "3"
};
$scope.items = temp.values.map(function (item) {
return item.tags.split(",");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" >
<div ng-controller ="myCtrl">
<div ng-repeat="group in items">
<p ng-repeat="tag in group">{{tag}}</p>
<hr />
</div>
</div>
</body>
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'm having a dynamic JSON, which contains the list of name, it also contains the children names as a subset. How can I show it in the HTML UI using angularJS ng-repeat
The Sample Dynamic JSON is
$scope.family = [
{
"name":"Siva",
"child":[
{
"name":"Suriya"
},
{
"name":"Karthick"
}
]
},
{
"name":"Kumar",
"child":[
{
"name":"Rajini"
},
{
"name":"Kamal"
},
{
"name":"Ajith"
}
]
},
{
"name":"Samer"
},
{
"name":"Mahesh"
}
];
<div ng-repeat="members in family">
<!-- How to Show it in the UI -->
</div>
Note: The JSON is generated based on Request. The Child array is
Optional and it may contain the length 'n'
You can better your answer by adding an ng-if directive, as the child is optional. Of course, it won't make any impact to you app, but it is a good way to code.
Plus, instead of adding ng-repeat on ul, it should be in li. It makes no sense in looping the ul for a single list.
Please refer the sample here.
HTML:
<div ng-app="app" ng-controller="test">
<ul ng-repeat="member in family">
<li>
{{member.name}}
<span ng-if="member.child.length > 0">
<ul>
<li ng-repeat="c in member.child">{{c.name}}</li>
</ul>
</span>
</li>
</ul>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function ($scope) {
$scope.family = [
{
"name": "Siva",
"child": [
{
"name": "Suriya"
},
{
"name": "Karthick"
}
]
},
{
"name": "Kumar",
"child": [
{
"name": "Rajini"
},
{
"name": "Kamal"
},
{
"name": "Ajith"
}
]
},
{
"name": "Samer"
},
{
"name": "Mahesh"
}
];
});
The Corrected answer
<ul ng-repeat="member in family">
<li>{{member.name}}
<ul>
<li ng-bind="c.name" ng-repeat="c in member.child"></li>
</ul>
</li>
</ul>