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)