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>
Related
I am using Vue and I have the array of objects and I need to use it to create a menu using that.
The array list looks like the following:
[{
"name": "Menu 1",
"url": "/link/menu-1",
"sub-menus": []
},
{
"name": "Menu 2",
"url": "/link/menu-2",
"sub-menus": [
{
"name": "Menu 2-1",
"url": "/link/menu-2-1",
"sub-menus": []
},
{
"name": "Menu 2-2",
"url": "/link/menu-2-2",
"sub-menus": []
}
]
},
{
"name": "Menu 3",
"url": "/link/menu-3",
"sub-menus": [
{
"name": "Menu 3-1",
"url": "/link/menu-2-1",
"sub-menus": [
{
"name": "Menu 3-1-1",
"url": "/link/menu-3-1-1",
"sub-menus": []
}
]
},
{
"name": "Menu 3-2",
"url": "/link/menu-2-2",
"sub-menus": []
}
]
}]
Since there are multiple sub-menu levels, I have no idea how to generate the menu dynamically.
The level of sub-menu is not fixed. It can be no sub-menu or more than 2 or 3 levels.
I want the output to be something like the following.
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
<ul>
<li>
Menu 2-1
</li>
<li>
Menu 2-2
</li>
</ul>
</li>
</ul>
Since i am new to Vue, i have no idea how this can be achieved. Thanks in advance.
I think you can do it with two components.
One that will build a menu for itself and it's sub ones :
var Menu = ({
name:"Menu",
template: `
<li>
<a :href="url">{{name}}</a>
<ul v-if="subMenus.length > 0">
<Menu
v-for="menu in subMenus"
:name="menu.name"
:url="menu.url"
:subMenus="menu['sub-menus']">
</Menu>
</ul>
</li>`,
props: {
name: {type:String, required:true},
url: {type:String, required:true},
subMenus: {type:Array, required:true}
}
})
And another one to insantiate everything, that will iterate over your menu list (that you will pass as a prop) :
var FullMenu = ({
components: {Menu},
name:"FullMenu",
template: `
<div>
<ul>
<Menu
v-for="menu in menus"
:name="menu.name"
:url="menu.url"
:subMenus="menu['sub-menus']">
</Menu>
</ul>
</div>
`,
props: {
menus: {type:Array, required:true}
}
})
Just use it like this:
<div>
<full-menu :menus="yourMenuListAsDataOrProps"></full-menu>
</div>`
Here is a running example on Observable : https://observablehq.com/d/802261a535698d88#FullMenu
i fixed this issue like below way:
use this in template section =>
<span v-html="hasChild(chart)"></span>
and hasChild method =>
hasChild(chart){
var html = ''
if(chart.childs.length>0){
html = html+'<ul>'
chart.childs.map(child=>{
html = html+'<li>'
html = html+'<a>'+child.title+'</a>'
if(child.childs.length>0){
html = html+this.hasChild(child)
}
html = html+'</li>'
})
html = html+'</ul>'
return html
}
}
and work fine for me.
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 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.
So take this example:
http://jsfiddle.net/7U5Pt/
Here I've got an object that describes a (very basic) menu. Each item can have multiple children with potentially unlimited levels of hierarchy.
The ng-repeat directives I'm using to turn it into <ul><li> elements work fine for the first two levels, but not for the third or any subsequent level of the hierarchy.
What's the best way to recursively iterate over this object, dealing with unlimited levels of children?
Any help much appreciated!
Here's the code incase the fiddle goes away:
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<nav class="nav-left">
<ul ng-repeat="item in mytree.items">
<li>NAME: {{ item.name }}
<ul ng-repeat="item in item.children.items">
<li>SUB NAME: {{ item.name }}</li>
</ul>
</li>
</ul>
</nav>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
$scope.mytree = {
"items": [{
"name": "one",
"children": {
"items": [
{
"name": "one sub a",
"children": {
"items": [{
"name": "one sub level two a"
},
{
"name": "one sub level two b"
}]
}
},
{
"name": "one sub b"
}
]
}
},
{
"name": "two"
},
{
"name": "three"
},
{
"name": "four",
"children": {
"items": [{
"name": "four sub a"
},
{
"name": "four sub b"
}]
}
},
{
"name": "five"
}]
};
});
So it turns out that the best way to do this, for anyone interested, is with the angular-recursion helper here:
https://github.com/marklagendijk/angular-recursion
This allows you to call the ng-repeat function recursively. So in your view, something like:
<tree family="mytree"></tree>
and then define a directive for that calls itself like so:
.directive('tree', function(RecursionHelper) {
return {
restrict: "E",
scope: {family: '='},
template:
'{{ family.name }}'+
'<ul ng-if="family.children">' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"></tree>' +
'</li>' +
'</ul>',
compile: function(element) {
return RecursionHelper.compile(element);
}
};
});
Apparently the recursion helper is necessary to stop some sort of infinite loop thing, as discussed here. Thanks to #arturgrzesiak for the link!