title: Loop through array of JSON object with *ngFor (Angular 4)
body: <p>I want to loop through an array of objects, which is in my json file.</p>
  
  <p>Json</p>
  
  <pre><code>[
    {
      "name": "Mike",
      "colors": [
        {"name": "blue"},
        {"name": "white"}
      ]
    },
  
    {
      "name": "Phoebe",
      "colors": [
        {"name": "red"},
        {"name": "yellow"}
      ]
    }
  ]
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div *ngFor="let person of persons"&gt;
     &lt;p&gt;{{person.name}}&lt;/p&gt; &lt;!-- this works fine--&gt;
     &lt;p *ngFor="let color of person.colors"&gt; &lt;!--I want to list the colors of the person here--&gt;
       {{color.name}}
     &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I cant access the colors array of a person. How do I achieve that?</p>
  
  <p>I've already looked at these posts but the solutions of them couldn't help me:</p>
  
  <p><a href="https://stackoverflow.com/questions/40254436/angular2-ngfor-iterating-over-json">Angular2 ngFor Iterating over JSON</a></p>
  
  <p><a href="https://stackoverflow.com/questions/43215049/angular2-ngfor-loop-through-json-object-with-array">Angular2 - *ngFor / loop through json object with array</a></p>