How to separate child array from json object

Question

"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?

Cosimo Chellini · Accepted Answer · 2021-09-16 15:29:30Z

1

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,
      }));
    });
  },

answered Sep 16, 2021 at 15:29

Cosimo Chellini

1,7201 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to separate child array from json object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related