"data": {
"master": {
"chicken": [
{
"productId": 6,
"productName": "Test prod",
"productIsSpecial": 1,
"restaurantId": 1,
"categoryId": 3,
"categoryName": "chicken",
"productImage": "2021-08-18T21:16:11.197586800_category.jpg",
"productRating": 5.0,
"productPrice": 10.0,
"productEnabled": 1
},
],
"wheat beer": [
{
"productId": 1,
"productName": "Non-Veg pizza",
"productIsSpecial": 1,
"restaurantId": 1,
"categoryId": 1,
"categoryName": "wheat beer",
"productImage": "2021-08-22T17:24:02.969600500_category.jpg",
"productRating": 5.0,
"productPrice": 200.0,
"productEnabled": 1
},
]
},
I have this JSON response, what I wanted to do is display all the products below their category array I'm using vue3 as my front-end js framework I tried with result.data.data.master but it only gives me data inside the category array without displaying the actual array name.
I want to display the category name as well. So, How can I display chicken as a cat name above the product list?
Edit: I want to display category wise product list, here my category is chicken[] and I'm getting that category's product list:
"chicken": [
{
"productId": 6,
"productName": "Test prod",
"productIsSpecial": 1,
"restaurantId": 1,
"categoryId": 3,
"categoryName": "chicken",
},
],
like this so how can I display chicken as a cat name above the product list?
I think the best way is to convert the object in this way. assuming you have a method loadData and you want to save the fetched data in results you can do something like this.
loadData() {
axios.get("yourendpoint.com").then((data) => {
this.results = Object.entries(data.data.master).map(([name, value]) => ({
name,
value,
}));
});
},