I have 2 different arrays retrieved from an API with no common FK or any other identifier.
Even though my TypeScript code produces the expected results, the view remains blank.
The debugging results are provided as comments in the code snippet below:
ngOnInit():void {
this.data.loadShul()
.subscribe(success => {
if (success) { //Debug Results: success = true
this.cafe = this.data.cafe,//Debug Results: Array(1) 0:{cafe:Array(5),restaurant :Array(5)}
this.restaurant = this.data.restaurant;
}
});
}`
This is how my view looks like:
<ul>
<li *ngFor="let sy of cafe">
name: {{sy.name}}
</li>
</ul>
<ul style="background-color:red">
<li *ngFor="let mk of restaurants">
{{ mk.id }}
</li>
</ul>
I am getting empty LI tags.
This is a snippet from my JSON data (e.g., Café):
`[
{
"cafe": [
{
"id": 1,
"name": "TestCafe ",
"style": "dairy cafe"
},
{
"id": 2,
"name": "cafe test ",
"style": "vegan"
},
{
"id": 3,
"name": "AnyCaffe ",
"style": "bakery"
},
{
"id": 4,
"name": "Pastry ",
"style": "Breads and \u0086Pastry\u0087"
},
{
"id": 5,
"name": "Fantastic ",
"style": "pizza"
}
],`