Loop through array of JSON object with *ngFor (Angular 4)

Question

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

Provincial

let color of person.colors. Voting to close for typo. – Epic

Possible duplicate of https://mcmap.net/q/188010/-how-can-i-debug-my-javascript-code-closed/3993662 – Cobaltous

@JBNizet sorry I forgot this in my post here, but I have it in my code, so that can't be the issue – Provincial

Nope, opening the console will immediately yield the error and solution @Pac0 – Cobaltous

Close the first paragraph. Check your console for error messages. – Epic

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 minimal reproducible example ) . – Egest

Answer 1

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"}
    ]
  }
  ];
}

Egest

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. – Provincial

@Provincial : 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 ? – Egest

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 – Provincial

Answer 2

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

Sutphin

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. – Nylons

Thanks a lot Vivek, You saved my day :) – Succeed

Nice one - same for me! Thanks – Katabolism