title: Cannot iterate over "dataList" returned from service call to java backend in angular 9 application
body: <p>I have some json data that is returned from a java backend service (houseguidelines) as a dataList via a service call from an angular application to that same application. I am trying to iterate over the json data that is returned and push it on to an array I created. However, I cannot accomplish this as I keep getting &quot;undefined&quot; errors in the browser console when I attempt this.</p>
  <p>The service call in the angular application looks like this:</p>
  <pre><code>export class HouseGuidelinesService {
     private readonly houseGuidelinesURL = 'http://localhost8200/homeguidelines';
  
     constructor(private http: HttpClient) {}
  
     getHouseData(houseCode: string): Observable&lt;HouseGuidelineResponse[]&gt; {
     
     return this.http.get&lt;HouseGuidelineResponse[]&gt;(this.houseGuidelinesURL + '/', {headers: {houseCodeList: houseCode}});    
  }
  }
  
  </code></pre>
  <p>The file that sends the data to the service call in the angular application looks something like this:</p>
  <pre><code>export class HouseComponent implements OnInIt {
  
  houseData: HouseGuidelineResponse[];
  houseList = [];
  
  constructor(private: activatedRoute: ActivatedRoute, private router: Router, private houseSummaryService: HouseService, private houseGuidelinesService: HouseGuidelinesService ) {}
  
  callHouseService(houseCodeList) {
    this.houseGuidelinesService.getHouseData(houseCodeList).subscribe(
    (data) =&gt; {
    this.houseData = data;
    console.log('display house guidelines', this.houseData);
    console.log('first house data: ', this.houseData[0])
    },
    (error) =&gt; {
    console.log('Error Getting House Policy Info!');
    }
    );
  
  
  }
  }
  
  </code></pre>
  <p>The value object for HouseGuidelineResponse in the angular application looks like this:</p>
  <pre><code>export class HouseGuidelineResponse {
  id: number;
  name: string;
  description: string;
  settings: HouseSettings[];
  }
  
  </code></pre>
  <p>The service call works and returns data as json that looks like this in the browser console:</p>
  <pre><code>dataList: Array(3)
    0: {id:1, name: 'house risk 1', description: 'the best guidelines', settings: Array(1)}
    1: {id:2, name: 'house risk 2', description: 'the next best guidelines', settings: Array(1)}
    2: {id:3, name: 'house risk 3', description: 'the worst guidelines', settings: Array(1)}
  
  </code></pre>
  <p>The problem comes in when I try to iterate or access any of the data from the data list, I cannot. For example, in the callHouseService(houseCodeList) function, I do something like:</p>
  <pre><code>for (const value of this.houseData) {
   this.houseList.push({
   id: value.id
  })
  }
  
  console.log(this.houseList)
  
  </code></pre>
  <p>I get an error stating &quot;houseData is not iterable&quot;.</p>
  <p>Alternatively, when I try to access individual elements of the &quot;dataList&quot; I am told they are undefined. For example, the following code below shows as &quot;undefined&quot; in the browser console. With the last console.log statement also giving this error as well &quot;error typeError: Cannot read properties of undefined (reading 'description').&quot;</p>
  <pre><code>console.log('first element: ', this.houseData[0]);
  console.log('maybe the first element: ', this.houseData[0].description);
  
  </code></pre>
  <p>My question is, how do I properly iterate over the returned json &quot;dataList&quot; to gain access to the json so I can use it and then assign it to my created value object?</p>