title: Angular 7 and Data sources a field is not iterable inside a loop but can be found if the whole array is consoled
body: <p>I have the following method which return a number, and if this number is bigger than 0, it will forbid a specific action:</p>
  
  <pre><code>checkAdded(name, forType, type) {
    name = this.pipe.transform(name);
    let count = 0;
    if (type == "situation") {
      Object.keys(this.dataSource3).forEach((key, index) =&gt; {
        //console.log('Sit '+this.dataSource3.filteredData[index]['situation_type']+ ' '+name);
        //console.log('Sit '+this.dataSource3.filteredData[index]['situation_for']+' '+forType);
        if (this.dataSource3.filteredData[index]['situation_type'] == name &amp;&amp; this.dataSource3.filteredData[index]['situation_for'] == forType) {
          count++;
          //console.log(count)
        }
      })
    }
  
  
      if (type == "legal") {
      Object.keys(this.dataSource2).forEach((key, index) =&gt; {
        console.log(this.dataSource2.filteredData[index]['legal_name']);
        //console.log('L '+this.dataSource2.filteredData[index]['legal_name']+ ' '+name);
        //console.log('L '+this.dataSource2.filteredData[index]['legal_for']+' '+forType);
        if (this.dataSource2.filteredData[index]['legal_name'] == name &amp;&amp; this.dataSource2.filteredData[index]['legal_for'] == forType) {
          count++;
          console.log(count)
        }
      })
    }
    if (type == "protection") {
      Object.keys(this.dataSource).forEach((key, index) =&gt; {
        if (this.dataSource.filteredData[index]['protection_name'] == name &amp;&amp; this.dataSource.filteredData[index]['protection_for'] == forType) {
          count++;
          //console.log(count);
        }
      })
    }
    //console.log(count)
    return count;
  }
  </code></pre>
  
  <p>If the user click on the button, specified for types <code>situation</code> and <code>protection</code>, the <code>checkAdded()</code> will work properly.</p>
  
  <p>But if the type is <code>legal</code>, the add button will throw the following error:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'legal_name' of undefined
        at protection.component.ts:162
        at Array.forEach ()
        at...</p>
  </blockquote>
  
  <p>The datasources are:</p>
  
  <pre><code>dataSource = new MatTableDataSource&lt;GetProtection[]&gt;();
  dataSource2 = new MatTableDataSource&lt;GetLegal[]&gt;();
  dataSource3 = new MatTableDataSource&lt;GetSituation[]&gt;();
  
  export interface GetProtection {
    protection_name: string;
    protection_date_added: string;
    protection_status: string;
    protection_for: number;
  
  }
  export interface GetLegal {
    legal_name: string;
    legal_date_added: string;
    legal_status: string;
    legal_for: number;
  
  }
  export interface GetSituation {
    situation_name: string;
    situation_date_added: string;
    situation_status: string;
    situation_for: number;
  
  }
  </code></pre>
  
  <p>If I console the following:</p>
  
  <pre><code>if (type == "legal") {
      Object.keys(this.dataSource2).forEach((key, index) =&gt; {
        console.log(this.dataSource2.filteredData[index]['legal_name']);
        if (this.dataSource2.filteredData[index]['legal_name'] == name &amp;&amp; this.dataSource2.filteredData[index]['legal_for'] == forType) {
          count++;
          //console.log(count)
        }
      })
    }
  </code></pre>
  
  <p>It will iterate all the possible values of <code>legal_name</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/z0JJ4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z0JJ4.jpg" alt="enter image description here"></a></p>
  
  <p>So the iteration is happening, but inside the <code>if</code> condition, it can't find <code>legal_name</code> in the array.</p>
  
  <p>If I console <code>this.dataSource2</code> just before doing the iteration, it will display all the array:</p>
  
  <p><a href="https://i.stack.imgur.com/f7oGP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f7oGP.jpg" alt="enter image description here"></a>.</p>
  
  <p>There is method, setting all three <code>dataSources</code> on component load:</p>
  
  <pre><code>this.dataSource = new MatTableDataSource(Object.values(data));
  this.dataSource2 = new MatTableDataSource(Object.values(data2));
  this.dataSource3 = new MatTableDataSource(Object.values(data3));
  </code></pre>
  
  <p><strong>EDIT</strong> </p>
  
  <p>Could I use <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/every" rel="nofollow noreferrer"><code>.every()</code></a> in case of <code>type == 'legal'</code>? But the code will be like using multiple method for the same reason.</p>