title: How to iterate through multi-nested JSON Object for dropdown function in Angular 6?
body: <p>I am working in Angular 6.0 and I have ran into the issue of using HttpClient to iterate through my JSON data I am reading in from a local file in my assets folder. </p>
  
  <p>Here is my JSON Data</p>
  
  <pre><code>[{
      "configKey": [{
          "user1": [{
              "subconfig": [{
                  "name": "program Id",
                  "type": "String"
              }, {
                  "name": "brand ID",
                  "type": "String"
              }]
  
          }],
          "user2": {
              "subconfig": [{
                  "name": "program Id",
                  "type": "String"
              }, {
                  "name": "brand ID",
                  "type": "String"
              }]
          },
  
          "user3": {
              "subconfig": [{
                  "name": "program Id",
                  "type": "String"
              }, {
                  "name": "brand ID",
                  "type": "String"
              }]
          }
      }]
  }]
  </code></pre>
  
  <p>Here is my current code in the component ts file</p>
  
  <pre><code>  rule:Array&lt;any&gt; =[];
  
    loadinfo(){
      this.http.get&lt;any[]&gt;("assets/test.json")
      .subscribe(data=&gt;{
        this.rule = data;
      })
    }
  </code></pre>
  
  <p>Here's what I have in the HTML File</p>
  
  <pre><code>
    &lt;label&gt;
      &lt;select&gt;
        &lt;option *ngFor="let og of rule"&gt;
          {{og.configKey}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
  
  </code></pre>
  
  <p>In my expected end goal, I should be able to populate a dropdown list based on a previous selection. (eg. I select user1, the list should populate with the 'names' in it's user tree in the JSON). However, I have not gotten to this part and would just like help with simply populating a dropdown list with names from my JSON tree.</p>
  
  <p>From my previous research, I understand that HttpClient only returns Objects and that *ngFor only works on arrays. I have tried to change the object to an array, but my result is only another error that states that ngFor can only iterate through objects. Is there a way to change my entire nested JSON object to Array?</p>
  
  <p>For what it's worth, here is my JSON Data in console
  <a href="https://i.imgur.com/PlLLpNW.png" rel="nofollow noreferrer">Console JSON</a></p>
  
  <p>How would I go about making my data iterable by *ngFor and how would I navigate to the names? I would assume in the html it would be something like this? :</p>
  
  <pre><code>//TEST CODE????
  
    &lt;label&gt;
      &lt;select&gt;
        &lt;option *ngFor="let og of rule"&gt;
          {{og.configKey.user1.subconfig.name}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
  
  </code></pre>
  
  <p>Any sort of help would be appreciated! Thanks in advance</p>