After researching extensively, I have attempted various methods to incorporate dynamic data into an HTML file. Unfortunately, none of them seem to be working for me at the moment.
In my app.component.html file, I inserted the following lines. While I can see the headers on the HTML page, the values are not appearing and I do not encounter any error messages in the Chrome console.
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 code above correctly displays values in the console as shown below:
https://i.sstatic.net/v8tNS.png
This is a sample JSON Array representation (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>"
}
]
}
I am seeking assistance in identifying what may be missing in my code or why it is not displaying properly. Understanding the logic behind this issue will be greatly beneficial for future reference.
Thank you in advance for your help.