Angular2 - *ngFor / loop through json object with array

Question

Want to loop through json object

//Defined on component side :
jsonObj = {
    '1' : [ {"title" : "title1" , "desc" : "desc1" }],
    '2' : [ {"title" : "title2" , "desc" : "desc2" }],
    '3' : [ {"title" : "title3" , "desc" : "desc3" }],
    '4' : [ {"title" : "title4" , "desc" : "desc4" }],
    '5' : [ {"title" : "title5" , "desc" : "desc5" }]
}

With *ngFor only on template side , And without any coding (function) on component side.

Want to print just each title and desc

Is this possible ? If Yes ? How ?

I dont think its possible without pipe or formating inside component.ts — Sajeetharan
– Sajeetharan, Commented Apr 4, 2017 at 18:52
without any "coding on component side" I don't think. But if you're ok to add a pipe then yes : stackoverflow.com/a/35261193/2398593 — maxime1992
– maxime1992, Commented Apr 4, 2017 at 18:52
I know all the other way , just trying to do it on template side @Maxime , Sajeetharan , thanks for your time , let me know if you find any solution. — Vivek Doshi
– Vivek Doshi, Commented Apr 4, 2017 at 18:55

Vivek Doshi · Accepted Answer · 2018-11-01 06:05:22Z

3

So great to find the best solution from Angular itself provides pipe to loop through JSON , and its keyvalue

<div *ngFor='let item of jsonObj | keyvalue'>
   Key: {{item.key}}

    <div *ngFor='let obj of item.value'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

WORKIGN DEMO

Previously :

Component side :

objectKeys = Object.keys;

Template side :

<div *ngFor='let key of objectKeys(jsonObj)'>
   Key: {{key}}

    <div *ngFor='let obj of jsonObj[key]'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

WORKING DEMO

edited Nov 1, 2018 at 6:05

answered Nov 17, 2017 at 4:12

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 - *ngFor / loop through json object with array

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related