Unable to get the JSON array to HTML dynamic table and It shows blank using typescript in Angular

Question

I just googled and found lot of resources to add dynamic data into HTML file but I applied most of them but nothing helps me as of now.

I just added the below lines in the app.component.html file. I can able to see the headers on the html page but I'm not able to find the values and it shows blank and I didn't find any error message in Chrome console page.

app.component.html:

<table width="100%" class="table">
  <thead>
     <tr>
      <th> Product Name</th>
      <th> API Name </th>
      <th>Message</th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let binary of data">
       <td>{{binary.productName}}</td>
       <td>{{binary.apiName}}</td>
       <td>{{binary.message}}</td>
     </tr>
  </tbody>
   </table>

app.component.ts:

 getById():void {
    const url:any = "http://localhost:8081/api/products?productId=23421342221";       
    this.http.get(url).subscribe(data =>{ 
        console.log(data);
    });  
  }

The above code prints an appropriate value in console as like below:

Sample JSON Array looks like below (Dummy JSON model):

{
 "dataSet":[
            { 
              "productName": "mobile", 
              "apiName":"Android",
              "message":"Its android mobile device and model is sony m5"
            },
            {
              "productName": "Laptop", 
              "apiName":"Linux",
              "message":"It's linux OS and kernel version is <XXX>"
            }
         ]
 }

Can someone help me that What I missed in my code and Why It doesn't shows up. It would be great if you help me to understand the logic so that It will be very helpful for my future reference.

Thanks in advance.

I suggest you read a bit about how angular data binding works. — Anurag Srivastava
– Anurag Srivastava, Commented Dec 21, 2019 at 7:50

Sajeetharan · Accepted Answer · 2019-12-21 07:48:13Z

4

You need to access the dataSet array of the data

change your code as

this.http.get(url).subscribe(data =>{ 
       this.data = data.dataSet;
});

answered Dec 21, 2019 at 7:48

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aboodz · Accepted Answer · 2019-12-21 10:22:53Z

2

As a good practice, try subscribing to observable using async pipe from the template. A quick example would be:

data$: Observable<any[]>;
ngOnInit(): void {
   this.data = this.http.get<any[]>(url).pipe(map(json => json.dataSet));
}

     <tr *ngFor="let binary of data$ | async">
       <td>{{binary.productName}}</td>
       <td>{{binary.apiName}}</td>
       <td>{{binary.message}}</td>
     </tr>

This way you don't need to worry unsubscrbing to hot observable or initial state.

edited Dec 21, 2019 at 10:22

answered Dec 21, 2019 at 10:19

Aboodz

1,62414 silver badges24 bronze badges

1 Comment

Aboodz Over a year ago

I edited the code please check now. I forgot to include the mapping

Santosh Shinde · Accepted Answer · 2019-12-21 07:54:11Z

1

Try like this

declare data property as array.

public data: Array<any> = [];

public getById():void {
    const url:any = "http://localhost:8081/api/products?productId=23421342221";       
    this.http.get(url).subscribe((data:any)=>{ 
        this.data = data.dataSet;
    });  
  }

answered Dec 21, 2019 at 7:54

Santosh Shinde

1,21210 silver badges18 bronze badges

2 Comments

user8520658 Over a year ago

what is different from the above answer?

ArrchanaMohan Over a year ago

It solved my problem. Thanks for sharing the exact piece of code.

Collectives™ on Stack Overflow

Unable to get the JSON array to HTML dynamic table and It shows blank using typescript in Angular

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related