I have JSON object:
content =
[
{
"id":1,
"name":"test",
"parent":{
"name":"test2",
"subParent":{
"name":"test3",
"subParent":{
"name":"test4",
"subParent":{
"name":"test5",
"subParent":null
}
}
}
}
}
]
How to iterate through each nested object and display the data in Angular?
I tried to do it with ngFor but it doesn't work
<ul>
<li *ngFor="let data of content">
{{data.id}}
<ul>
<li *ngFor="let p of data.parent">
{{p.name}}
</li>
</ul>
</li>
</ul>
You can try something like that, but recursive templates is for me, the right way to do that.
Regards,
Related
I have a sample json,I need to create a sidebar using ul li tag and value comes from json.My json structure is something like this.
{"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}.I have already done in angularjs here http://plnkr.co/edit/D8M1U81tVz3UuzjWathk?p=preview , but This does not work in angular 6.Can anyone please help me,I am new in angular,Here is the code below
app.html
<ul *ngFor="(x, y) of items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li *ngFor="p of y.value">{{p}}</li>
</ul>
</li>
</ul>
app.ts
export class Heroes {
let items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}};
}
I suggest you to work with an iterable objects when you try to use *ngFor in your html component.
So, that's my solution:
<ul *ngFor="let parent of (items.filter | keyvalue)">
<li class="parent">{{ parent.key }}</li>
<ul *ngFor="let child of (parent.value.value | keyvalue)">
<li class="child">{{ child.value }}</li>
</ul>
</ul>
First of all I used the keyvalue pipe from angular (https://angular.io/api/common/KeyValuePipe) after that you are allowed to iterate your json object as you want without change it.
Also, here I leave an example of how it works (https://stackblitz.com/edit/angular-gqaaet)
You need to change the json format.
items = {"filter":
[{
"name":"Category1",
"value":["one","two","three"]
},
{
"name":"Category2",
"value":["four","five","six"]
}
]};
HTML
<ul *ngFor="let item of items.filter">
<li class="parent"><b>{{item.name}}</b></li>
<li class="child">
<ul>
<li *ngFor="let p of item.value">{{p}}</li>
</ul>
</li>
</ul>
The above code would work. *ngFor works with the iteration protocols, the json format you've added has map(filter) of map(category) of map(value) format, where the values are not obtained to be iterated.
I recieve an object that looks like this:
I'm trying to use ng-repeat to display the "Message", "Priority" and "DateTime" properties of each object as li items in a ul.
I've tried a couple of approaches including ng-repeat and ngFor, where all have been wrapped in divs like the first option:
This seems like the proper way to do it, but returns exactly nothing:
<div style="background: red;">
<ul>
<li ng-repeat="Notification in allNotifications">{{Notification}}</li>
</ul>
</div>
This option returns the specific object as expected:
<li style="border-radius: 3px"
[ngStyle]="{'color' : alertText}" >
Notification: {{ allNotifications.Notifications['0'].Message['0'] }}
</li>
Doesnt compile:
<li style="border-radius: 3px"
[ngStyle]="{'color' : alertText}"
[ngFor]="let subItem of allNotifications.Notifications['0'].Message['0']">
Notification: {{ subItem }}
</li>
My TS looks like this:
export class EventLogComponent implements OnInit {
constructor(private _dashdata: DashdataService) { }
NotificationName: string;
alertText: string;
allNotifications: JSON;
ngOnInit() {
this.NotificationName = 'NoNameAvailable';
this.alertText = 'Black'; //TODO: set color according to threatlevel
setInterval(() => {
this._dashdata.getAllNotifications()
.subscribe(res => {
this.allNotifications = res['notificationdata'];
console.log(this.allNotifications);
});
}, 5000); // Data Update interval in MS
}
}
ng-repeat is directive of framework AngularJS.
You are using Angular so in your case you should use ngFor:
<div style="background: red;"> <ul> <li *ngFor="let notification of allNotifications">{{notification}}</li> </ul> </div>
Using angular you should forget ng-repeat that is apart of AngularJS (version <= 1.6)
I think you have a double problem, the first one, as said, is ng-repeat, the second one is that you are not well targeting your data.
Try this
template
<div style="background: red;">
<ul>
<li *ngFor="let not of allNotifications.Notification">{{not}}</li>
</ul>
</div>
I am new to angular,
I have created a service to loop the nested json data for my list.
export const CATEGORIES: Category[] = [
{
id: 1,
categoryName:'Accessories',
subcatName: [
{subcategory: 'belts',}
],
},
{
id: 2,
categoryName:'Clothing',
subcatName: [
{subcategory: 'jeans}',
],
},
];
and
#Injectable()
export class CategoriesService {
constructor() { }
getCategories(): Category[]{
return CATEGORIES;
}
}
I am trying to loop this data on my list
<ul>
<li *ngFor="let cat of categoryList">
{{cat.categoryName}}
<ul>
<li *ngFor="let subcat of categoryList">
asdad {{subcat.subcategory}}
</li>
</ul>
</li>
</ul>
For this I have added code in component .ts file
export class CategoriesComponent implements OnInit {
categoryList: Category[];
constructor(private categoryservice: CategoriesService) { }
ngOnInit() {
this.categoryList = this.categoryservice.getCategories();
}
}
Please help, I want to create a navbar list of categories, when upon hover it shows the relevant subcategory. Please let me know if you need additional information.
in the inner loop, you should loop over the inner array
<ul>
<li *ngFor="let cat of categoryList">
{{cat.categoryName}}
<ul>
<li *ngFor="let subcat of cat.subcatName">
asdad {{subcat.subcategory}}
</li>
</ul>
</li>
</ul>
Your inner loop should iterate over cat of the parent not categoryList
Change
From
<li *ngFor="let subcat of categoryList">
asdad {{subcat.subcategory}}
</li>
To
<li *ngFor="let subcat of cat.subcatName">
asdad {{subcat.subcategory}}
</li>
I have this dynamic list created with ngFor. When I click on item I want to expand it with new dynamic list, but only for that item. In my following code it expends for every item in the first list. I understand why that is happening, but I don't have ideas how to solve it.
Here is my code
<ul *ngFor="let p of portList">
<li (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png" class="myimage"/>{{ p.name}}</li>
<ol *ngFor="let onu of portONUList">
<li><img src="app/resources/{{ onu['oper-status'] }}.png" class="myimage" />{{ onu.name}}</li>
</ol>
</ul>
Any ideas how to solve this would be very helpful.
From what I understand, the subarray is the same which is shown for all your items, so there is no relation between the nested array and the outer array.
My suggestion would actually be to add a new property in your array, e.g expanded... so e.g your outer array would look like:
portList = [{id:1,name:'one',expanded:false},{id:2,name:"two",expanded:false}];
And then your HTML:
<ul *ngFor="let p of portList">
<li (click)="expand(p)">{{ p.name}}</li>
<div *ngIf="p.expanded">
<ol *ngFor="let onu of portONUList">
<li>{{ onu.name}}</li>
</ol>
</div>
</ul>
And on click, toggle the expanded property:
expand(p: any) {
p.expanded = !p.expanded;
}
Of course if you want to have a "quick" solution you could rely on HTML5 with no need of the new property:
<details *ngFor="let p of portList">
<summary>{{p.name}}</summary>
<ul *ngFor="let onu of portONUList">
<li>{{ onu.name}}</li>
</ul>
</details>
Here's a plunker with both options.
There should be a relation between parent and childlist and the list should be in json format. Refer below code
<ul>
<li ng-repeat="item in parent" ng-click="showChilds(item)">
<span>{{item.name}}</span>
<ul>
<li ng-repeat="subItem in item.subItems" ng-show="item.active">
<span>{{subItem.name}}</span>
</li>
</ul>
</li>
</ul>
Sample JSON FORMAT
let parent= [
{
name: "Item1",
subItems: [
{name: "SubItem1"},
{name: "SubItem2"}
]
},
{
name: "Item2",
subItems: [
{name: "SubItem3"},
{name: "SubItem4"},
{name: "SubItem5"}
]
},
{
name: "Item3",
subItems: [
{name: "SubItem6"}
]
}
];
So i loaded the json and now i cant display it and it says not well-formed. But i'm not really sure what to write in html.
here is my js:
app.controller('jsonController', function($scope, $http) {
$http.get('podaci.json').success(function(data) {
$scope.gradovi = data;
});
});
and html:
<div ng-controller = "jsonController">
<ol>
<li ng-repeat="gradovi in ponudjene">
{{gradovi.ponudjene}}
</li>
</ol>
</div>
and this is json:
{
"ponudjene": [
"Ada",
"Adaševci",
"Žitni Potok",
"Žitorađa",
"Zlatibor",
"Zlatica",
"Zlodol",
"Zlot",
"Zmajevo",
"Zminjak",
"Zrenjanin",
"Zubin Potok",
"Žuč",
"Zuce",
"Zvečan",
"Zvezdan",
"Zvonce",
"Đala",
"Đunis",
"Đurđevo",
"Đurđin"
],
"tacno": [
"Zvezdan",
"Zvezdan",
"Bor",
"Rudna Glava",
"Majdanpek"
],
"vreme": 100,
"oblast": "Istocna srbija"
}
Try like this
<ol>
<li ng-repeat="item in gradovi.ponudjene">
{{item}}
</li>
<li ng-repeat="item in gradovi.tacno">
{{item}}
</li>
<li>
{{gradovi.vreme}}
</li>
<li>
{{gradovi.oblast}}
</li>
</ol>
Not sure what your json data looks like, but your $scope is "gradovi", so your li should look something like this:
<li ng-repeat="item in gradovi">
{{item.name_of_field_in_your_json}}
</li>
UPDATE:
Now that I see your json data. Here is the fiddle:
http://jsfiddle.net/RkykR/778/
Found it!Thank u all for help! :)
<ol>
<li ng-repeat="item in gradovi.ponudjene track by $index">
{{item}}
</li>
</ol>