title: Angular failed to display data in JSON on Table
body: <p><a href="https://i.stack.imgur.com/kPUvO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kPUvO.png" alt="output"></a></p>
  
  <p><a href="https://i.stack.imgur.com/4gnoK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4gnoK.png" alt="json data"></a></p>
  
  <p><strong>i am not able to properly display the data in the table there are some blank rows in the table i don't know how they are coming after each product row</strong></p>
  
  <p><strong>is there a problem in the ngfor loop</strong> 
  <strong>or a problem with my product model</strong>
  <em>if this is not solved then is there any other way to dispay the nested json in angular in table format</em></p>
  
  <p>
        </p>
  
  <pre><code>    &lt;th scope="col"&gt;Company&lt;/th&gt;
      &lt;th scope="col"&gt;Description&lt;/th&gt;
      &lt;th scope="col"&gt;Type&lt;/th&gt;
      &lt;th scope="col"&gt;Case&lt;/th&gt;
      &lt;th scope="col"&gt;Quantity&lt;/th&gt;
      &lt;th scope="col"&gt;U/M&lt;/th&gt;
      &lt;th scope="col"&gt;Rate&lt;/th&gt;
      &lt;th scope="col"&gt;Retension&lt;/th&gt;
      &lt;th scope="col"&gt;New Rate&lt;/th&gt;
      &lt;th scope="col"&gt;My Retension&lt;/th&gt;
      &lt;th scope="col"&gt;Final Rate&lt;/th&gt;
      &lt;th scope="col"&gt;Retail Rate&lt;/th&gt;
      &lt;th scope="col"&gt;Remarks&lt;/th&gt;
      &lt;th scope="col"&gt;Edit Product&lt;/th&gt;
      &lt;th scope="col"&gt;Delete Product&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  
  
  
  &lt;tbody  *ngFor="let product of productdata| keyvalue;"&gt;
  
  
    &lt;tr *ngFor="let productdescription of product.value|keyvalue;"&gt;
  
        &lt;td&gt; {{productdescription.value.company}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.description}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.type}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.productcase}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.quantity}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.units}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.rate}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.retension}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.newrate}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.myretension}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.finalrate}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.retailrate}}&lt;/td&gt;
        &lt;td&gt;{{productdescription.value.remarks}}&lt;/td&gt;
        &lt;td&gt;&lt;button type="button" class="btn btn-primary" (click)="onEdit(product.value.pk)"&gt;Edit&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button type="button" class="btn btn-primary" (click)="onDelete(product.value.pk)"&gt;Delete&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
  
  &lt;/tbody&gt;
  </code></pre>
  
  <p>product model</p>
  
  <pre><code>export interface ProductData{
    model:string;
    pk:string;
    fields:Product;
  }
  export interface Product{
     productId:string;
     company: string;
     description:string;
    type: string;
    productcase: number;
     quantity: number;
     units: string;
     rate: number;
     retension: number;
     newrate: number;
    myretension: number;
     finalrate: number;
     retailrate:number;
    remarks:string;
  
  
  
  }
  </code></pre>
  
  <p>function to  retrieve data</p>
  
  <pre><code>viewProducts():Observable&lt;ProductData&gt;{
      return this.http.get('http://192.168.0.15:8000/view/').pipe(map(data =&gt; &lt;ProductData&gt;data));
  
    }
  
   fetchTable(){
      this.productService.viewProducts().subscribe(
        (response) =&gt;
        {
  
        console.log(response);
        this.productdata= response;
  
        }
      );
    }
  </code></pre>