can't get JSON data with ng-for - json

Question

I have JSON containing Stores[]--->Products[]--->ProductDetails--->ProductTags[] for the begining I want to see all the data
so I coded:
service
export class StoreService {
//private myurl: string ="apidata/products.json"
constructor(private _http: Http) {}
getProducts(): Observable < any > {
let apiUrl = './assets/products.json';
return this._http.get(apiUrl)
.pipe(map((response: Response) => {
const data = response.json();
return data;
}));
}
store component:
export class StoreComponent implements OnInit {
products = [];
constructor(private _storeService: StoreService) {}
ngOnInit() {
this._storeService.getProducts()
.subscribe(data => {
this.products = data;
console.log(data)
});
}
}
html
<h2>store</h2>
<ul>
<li *ngFor="let p of products">{{p}}</li>
</ul>
the error I get:
Error trying to diff '[object Object]'. Only arrays and iterables are
allowed

Answer 1

An error which you are getting suggests that your data is either an object / map instead of an array.
If you want to use *ngFor in your template, your data needs to be an array instead of an object.
Although angular team introduce a pipe called "keyvalue" in version 6.1. So you can take advantage of that and iterate over an object inside your angular template.
For example, assume that your object looks like below
const user = {
name: 'xyz',
age: 30,
gender: 'male'
};
So in your template file, you can iterate over this object like this
<ul>
<li *ngFor="let data of user | keyvalue">
Key : {{data.key}} and Value : {{data.value}}
</li>
</ul>
Please refer this link for more info about this pipe

Answer 2

You generally get this error when you pass an Object to *ngFor as an input. As the error states, *ngFor only works with Iteratable Data Structures, which in our case will be an array of products.
Make sure that in here: this.products = data;, data is actually an array.
UPDATE:
As it's quite obvious from this screenshot of the console log:
data is an object and not an array. PriceFilter, Stores and GenderFilter on that object are arrays. If you want to show stores, you can do:
export class StoreComponent implements OnInit {
stores = [];
constructor(private _storeService: StoreService) {}
ngOnInit() {
this._storeService.getProducts()
.subscribe(data => {
this.stores = data.Stores;
console.log(data)
});
}
}
And in template
<h2>store</h2>
<ul>
<li *ngFor="let store of stores">
<h4>Products:</h4>
<ul>
<li *ngFor="let product of store.Products">
<p>Product Id: {{ product.ProductId }}</p>
<p>Product Title: {{ product.ProductTitle }}</p>
...
</li>
</ul>
</li>
</ul>

Answer 3

The main purpose of this error is that your data (products) is returning an object {} - ngFor requires an array [] to iterate. Either you have to check your HTTP Response or fix your backend API.
And merely for your example you can do this this.products = data.Stores; (if it is stores is what you're looking for to iterate on).
UPDATE
According to your link in comments you have to change your code to :
this.products = data.Stores;
And then :
<div *ngFor="let p of products">
<ul>
<li *ngFor="let item of p">
<-- HERE you take whatever you want from your product object --!>
</li>
</ul>
</div>