Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

44
Vistas
How to concat JSON field into another object

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)
 }
}
7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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"];
  });
});
7 months ago · Juan Pablo Isaza Denunciar

0

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)

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos