Loop thru my json file in ionic

Ionic Framework ionic-v3
1

How do I loop thru my json file to get only the categoriesid items without my productid items showing up in a list.

here is my json file

[{
“categoriesid”: 1,
“name”: “Breakfast”,
“img”: “https://firebasestorage.googleapis.com/v0/b/alkalinemeals.appspot.com/o/assets%2FbreakFastP.jpg?alt=media&token=c02cf393-e9d6-4de1-859b-80dd19ad30ee”,
“desc”: “The best cupcakes, cookies, cakes, pies, cheesecakes, fresh bread, biscotti, muffins, bagels, fresh coffee and more.”,
“tags”: [“cold”, “ice”],
“dimensions”: {
“small”: 7.0,
“half”: 12.0,
“full”: 9.5
},
“Products”: {
“productsid”: 1,
“categoryId”: “1”,
“title”: “BAGUETTE”,
“isSpecial”: false,
“image”: “https://firebasestorage.googleapis.com/v0/b/alkalinemeals.appspot.com/o/assets%2FbreakFastP.jpg?alt=media&token=c02cf393-e9d6-4de1-859b-80dd19ad30ee”,
“info”: “Great eaten fresh from oven. Used to make sub sandwiches, etc.”,
“price”: [“small”, 9.90, “half”, 18.00, “full”, 26.00]
}
},
{
“categoriesid”: 2,
“name”: “Lunch”,
“img”: “https://firebasestorage.googleapis.com/v0/b/alkalinemeals.appspot.com/o/assets%2FbreakFastP.jpg?alt=media&token=c02cf393-e9d6-4de1-859b-80dd19ad30ee”,
“desc”: “It’s consistently excellent, dishes are superb and healthily cooked with high quality ingredients.”,
“tags”: [“cold”, “ice”],
“dimensions”: {
“small”: 7.0,
“half”: 12.0,
“full”: 9.5
},
“Products”: {
“productsid”: 2,
“categoryId”: “1”,
“title”: “CROISSANTS”,
“isSpecial”: true,
“image”: “https://firebasestorage.googleapis.com/v0/b/alkalinemeals.appspot.com/o/assets%2FbreakFastP.jpg?alt=media&token=c02cf393-e9d6-4de1-859b-80dd19ad30ee”,
“info”: “A croissant is a buttery, flaky, viennoiserie-pastry named for its well-known crescent shape.”,
“price”: [“small”, 9.90, “half”, 18.00, “full”, 26.00]
}
}
]

…

This is my call to my json

getCatergories() {
this.http.get(’/assets/data/category.json’)
.subscribe(res => {
this.data = res;
console.log(this.data, this.http);
}, error => {
console.log(error); // Error getting the data
});
}

2

Have you tried json2typscript?

https://www.npmjs.com/package/json2typescript

It is a tool to map your JSON responses to Typescript objects. Once you have the Typescript objects you can iterate over them and just pick out the categoriesid attribute!

3

Hi@LeshawnMcCann
Use ngFor for the iteration of your array :smiley:

<ion-item *ngFor="let item of data">
  <h1>{{item.categoriesid}}</h1>
</item>
4

Close but this don’t work for me I need the “name”, “img”, and “desc” tags from categoriesid without any of the productsid showing.