How to concat JSON field into another object-CodePudding

Here is the data in question:

[
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                },
                "numOf": 4
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                },
                "numOf": 3
            }
        ],
        "total_number": 0
    }
]

I want to concate numOf into hist parent ingredient for my table to render properly Right now given 2 ingredients my table has 4 rows

Edit

Desired result should look like this:

[
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                    "numOf": 4,
                }
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                    "numOf": 3,
                }
            }
        ],
        "total_number": 0
    }
]

The JSON file you see is my server response when queried about user's fridge. Then I want to dispaly all of his ingredient's in a table. Here's how I declare the array in VueJS:

import axios from 'axios'
export default {
    name: 'Fridge',
    data() {
        return {
            username: '',
            fridge: {},
            ingredients: []
        }
    },
}

Here's the code that loops through response data and adds ingredients object and store's it in array called ingredients. I've tried declaring is a object but it didn't work.

for (let i = 0; i < res.data["ingredients"].length; i  ) {
 var obj = this.fridge.ingredients[i]
 for (var key in obj) {
  var value = obj[key]
  this.ingredients.push(value)
 }
}

CodePudding user response：

You can just loop through each item in the ingredient key of each item in the array of data and for each item add the numOf key in the ingredient object and remove the numOf on the parent item.

let data = [
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                },
                "numOf": 4
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                },
                "numOf": 3
            }
        ],
        "total_number": 0
    }
];

data[0].ingredients.map((item, index) => {
  item["ingredient"]["numOf"] = item["numOf"];
  delete item["numOf"];
});

console.log(data);

If you want to be more dynamic and not be specific as in the previous code

you can procide like this

data.forEach(dataItem => {
  dataItem.ingredients.map((item, index) => {
    item["ingredient"]["numOf"] = item["numOf"];
    delete item["numOf"];
  });
});

CodePudding user response：

You can use 2 loops to iterate over the data, adding the numOf to the ingredient and then deleting it.

The first loop will loop over all items in data, the second loops over all ingredients in that object.

const data = [
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                },
                "numOf": 4
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                },
                "numOf": 3
            }
        ],
        "total_number": 0
    }
]

data.forEach((d) => {
  d.ingredients.forEach((i) => {
    i.ingredient.numOf = i.numOf
    delete i.numOf
  })
})

console.log(data)