title: Trying to display a table with data from API, array inside JSON Object ANGULAR
body: <p>I'm working in a project to help a friend, so most of the code in the services and the backend was already there, so I've been struggling with the structure and sometimes I get lost.</p>
  <p>Here's my problem
  This is the structure of the data on the API:</p>
  <pre><code>{
      &quot;title&quot;: &quot;&quot;,
      &quot;iconURL&quot;: &quot;,
      &quot;linkedRightsIDs&quot;: [
          &quot;&quot;
      ],
      &quot;linkedRights&quot;: [
          {
              &quot;id&quot;: ,
              &quot;creationDate&quot;: &quot;&quot;,
              &quot;sections&quot;: [
                  &quot;women&quot;
              ],
              &quot;defLanguage&quot;: &quot;en&quot;,
              &quot;countryApplied&quot;: &quot;united states&quot;,
              &quot;statesApplied&quot;: [
                  &quot;all&quot;
              ],
              &quot;title&quot;: &quot;&quot;,
              &quot;translations&quot;: [
                  &quot;en&quot;
              ],
              &quot;disable&quot;: false,
              &quot;content&quot;: null
          }
      ]
  }
  </code></pre>
  <p>What I'm trying to achieve, is to make a table inside my component using the LinkedRights data. Right now, this structure only have 1 linkedRight (I deleted the data inside for privacy)</p>
  <p>Anyways, here's the method regarding the service and model in my component.ts:</p>
  <pre><code>  onModelLoadedAsync() {
      super.onModelLoadedAsync();
  
      if (this.mode == 'create') {
        this.model = LocalityInfo;
      } else {
        if (this.model.iconURL){
          this.imageSrc = this.model.iconURL;
        }
      }
      if(this.mode == 'edit'){
  
        const data= Object.entries(this.model.linkedRights); //this is me just testing
        console.log(data);
      }
    }
  </code></pre>
  <p>here's the html of the table I'm trying to display, this is and edit route so there's a query param for the id in this view</p>
  <pre><code>&lt;div class=&quot;table-responsive&quot;&gt;
          &lt;table  class=&quot;table table-hover&quot;&gt;
            &lt;thead class=&quot;thead-dark&quot;&gt;
              &lt;tr&gt;
                &lt;th&gt;Title&lt;/th&gt;
                &lt;th&gt;Sections&lt;/th&gt;
                &lt;th&gt;States&lt;/th&gt;
                &lt;th&gt;Enabled&lt;/th&gt;
                &lt;th&gt;Creation Date&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr *ngFor=&quot;let item of data&quot;&gt;
                &lt;td&gt;{{item.title}}&lt;/td&gt;
                &lt;td&gt;{{item.sections}}&lt;/td&gt;
                &lt;td&gt;{{item.statesApplied}}&lt;/td&gt;
                &lt;td&gt;{{!item.disabled}}&lt;/td&gt;
                &lt;td&gt;{{item.creationDate}}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
      
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>What I was trying to do, was to convert the JSON into an array so I could display it since there's an error that shows on the console that said this:</p>
  <p><strong>core.js:6456 ERROR Error: Cannot find a differ supporting object '[object Object]' of type'object'. NgFor only supports binding to Iterables such as Arrays.</strong></p>