9

I want to loop through an array of objects, which is in my json file.

Json

[
  {
    "name": "Mike",
    "colors": [
      {"name": "blue"},
      {"name": "white"}
    ]
  },

  {
    "name": "Phoebe",
    "colors": [
      {"name": "red"},
      {"name": "yellow"}
    ]
  }
]

html

<div *ngFor="let person of persons">
   <p>{{person.name}}</p> <!-- this works fine-->
   <p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
     {{color.name}}
   </p>
</div>

I cant access the colors array of a person. How do I achieve that?

I've already looked at these posts but the solutions of them couldn't help me:

Angular2 ngFor Iterating over JSON

Angular2 - *ngFor / loop through json object with array

BlueCat
  • 673
  • 4
  • 16
  • 27
  • 2
    **let** color of person.colors. Voting to close for typo. – JB Nizet Jan 23 '18 at 12:52
  • Possible duplicate of https://stackoverflow.com/q/988363/3993662 – baao Jan 23 '18 at 12:53
  • @JBNizet sorry I forgot this in my post here, but I have it in my code, so that can't be the issue – BlueCat Jan 23 '18 at 12:54
  • Nope, opening the console will immediately yield the error and solution @Pac0 – baao Jan 23 '18 at 12:54
  • 1
    Close the first paragraph. Check your console for error messages. – JB Nizet Jan 23 '18 at 12:55
  • Ok, now that your code example is fixed, we have shown you that there is nothing wrong in the code you shown. The issue lies probably in the way you assign your object to the variable `persons` . Please add the needed code to reproduce the issue, (a [mcve] ) . – Pac0 Jan 23 '18 at 13:12

2 Answers2

16

For Angular 6.1+ , you can use default pipe keyvalue ( Do review also ) :

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

WORKING DEMO

Previously : As you are saying :

Angular2 - *ngFor / loop through json object with array , this couldn't help you

You dont have any need of that, coz your code works fine , please check

WORKING DEMO

Vivek Doshi
  • 56,649
  • 12
  • 110
  • 122
  • 4
    OMG! after all the solution was just a pipe? dude, this was the answer I was looking for and should have used in my task at work weeks ago (_I used some weird techniques to work it out instead_). Thanks a lot @Vivek...might refer this when I face the same problem anytime in future. – Akhil Nov 17 '19 at 14:03
  • Thanks a lot Vivek, You saved my day :) – Jayesh Dhandha Nov 27 '19 at 12:52
  • Nice one - same for me! Thanks – Voltan Dec 17 '21 at 19:42
6

Your code (the part you shown) works fine (see the plunker linked below).

As the only thing not shown in your question is the way you assign your Javascript Object to the variable persons, I urge you to show you more code / search the issue there.

https://plnkr.co/edit/rj4K2sKHTHsVtdt4OWfC?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div *ngFor="let person of persons">
        <p>{{person.name}}</p> <!-- this works fine-->
        <p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
           {{color.name}}
        </p>
      </div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {

  }

  persons = [
  {
    "name": "Mike",
    "colors": [
      {"name": "blue"},
      {"name": "white"}
    ]
  },

  {
    "name": "Phoebe",
    "colors": [
      {"name": "red"},
      {"name": "yellow"}
    ]
  }
  ];
}
Pac0
  • 21,465
  • 8
  • 65
  • 74
  • I'm using json-server to access my json file. I could post the code but i think it would confuse even more because it's a lot of code and I think that accessing the json file isn't really the problem, because I can see the names of the persons, so this shouldn't be a problem. I thought I might do something wrong with the array but as I saw in your plunker it should work fine. It's weird that it's not working in my code because I have the exact same code as in your plunker. – BlueCat Jan 23 '18 at 13:13
  • @BlueCat : you probably don't have the same code, otherwise it wouldn't give different results. Can you at least show the exact return value of request to your server (from the browser console network tab) ? and how it is assigned to the variable persons? Or maybe you are somehow overwriting `persons` somewhere with something else ? – Pac0 Jan 23 '18 at 13:17
  • I was able to fix it. My code is working fine but my json-server had some problems. I fixed the problem and now it's finally working. Thanks anyway for your help – BlueCat Jan 23 '18 at 13:26