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)
}
}
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"];
});
});
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)