Struggling to iterate through the response.data as intended

Question

Struggling to iterate through the response.data as intended

Assume that the response.data I have is:

{
    "data": {
        "person1": [
            {
                "name": ....
                "age": xx
            }
        ],
        "person2": [
            {
                "name": ....
                "age": xx
            }
        ],
        "person3": [
            {
                "name": ....
                "age": xx
            }
        ]
    }
}

In my attempt to add a gender field to each person using the map function, I wrote this code:

axios
    .get('...')
    .then(response => (this.people = [response.data].map(person => {
        person.gender = "";
        return person;
    })))

However, only one gender field gets added to the entire response.data rather than to each individual person. What could be the issue here?

The desired outcome should look like this:

{
    "data": {
        "person1": [
            {
                "name": ....
                "age": xx
            },
            gender: ""
        ],
        "person2": [
            {
                "name": ....
                "age": xx
            },
            gender: ""
        ],
        "person3": [
            {
                "name": ....
                "age": xx
            },
            gender: ""
        ]
    }
}

javascript arrays api vue.js

Answer 1

Answer №1

Based on your response format, you can extract the initial response.data entries (this will give you an array of arrays with key and values).

Next, you can utilize the reduce method where the first parameter is the accumulator, and the second parameter is the current [key, value] pair being iterated. The variable value represents the array, so by accessing value[0] which is an object, you can construct your new array as [ { ...value[0], gender: '' }]

const response = {
    "data": {
        "person1": [
            {
                "name": 'john',
                "age": 33
            }
        ],
        "person2": [
            {
                "name": 'mary',
                "age": 22
            }
        ],
        "person3": [
            {
                "name": 'diego',
                "age": 14
            }
        ]
    }
}

console.log(
  Object.entries(response.data).reduce((obj, [key, value]) => {
    obj[key] = [ { ...value[0], gender: ''} ]
    return obj
  },{})
)

Answer 2

Based on your response format, you can extract the initial response.data entries (this will give you an array of arrays with key and values).

Next, you can utilize the reduce method where the first parameter is the accumulator, and the second parameter is the current [key, value] pair being iterated. The variable value represents the array, so by accessing value[0] which is an object, you can construct your new array as [ { ...value[0], gender: '' }]

const response = {
    "data": {
        "person1": [
            {
                "name": 'john',
                "age": 33
            }
        ],
        "person2": [
            {
                "name": 'mary',
                "age": 22
            }
        ],
        "person3": [
            {
                "name": 'diego',
                "age": 14
            }
        ]
    }
}

console.log(
  Object.entries(response.data).reduce((obj, [key, value]) => {
    obj[key] = [ { ...value[0], gender: ''} ]
    return obj
  },{})
)

Answer 3

Answer №2

The issue lies in not properly iterating through the nested objects within response.data. By using [response.data], you are creating an array with only one element, which is the entire object of response.data. Then, you add the gender property to that single object and return an array containing this modified object.

To solve this problem, make sure to iterate over each individual element within response.data. One way to achieve this is by using Object.values() to get an iterator of these values.

this.people = Object.values(response.data).map(person => ({...Object.values(person)[0], gender: ''}))

For a demonstration, see the following code snippet:

let response = {
    "data": {
        "person1": [
            {
                "name": "Person 1",
                "age": 10
            }
        ],
        "person2": [
            {
                "name": "Person 2",
                "age": 25
            }
        ],
        "person3": [
            {
                "name": "Person 3",
                "age": 47
            }
        ]
    }
};

let people = Object.values(response.data).map(person => ({...Object.values(person)[0], gender: ''}));
console.log(people);

Answer 4

The issue lies in not properly iterating through the nested objects within response.data. By using [response.data], you are creating an array with only one element, which is the entire object of response.data. Then, you add the gender property to that single object and return an array containing this modified object.

To solve this problem, make sure to iterate over each individual element within response.data. One way to achieve this is by using Object.values() to get an iterator of these values.

this.people = Object.values(response.data).map(person => ({...Object.values(person)[0], gender: ''}))

For a demonstration, see the following code snippet:

let response = {
    "data": {
        "person1": [
            {
                "name": "Person 1",
                "age": 10
            }
        ],
        "person2": [
            {
                "name": "Person 2",
                "age": 25
            }
        ],
        "person3": [
            {
                "name": "Person 3",
                "age": 47
            }
        ]
    }
};

let people = Object.values(response.data).map(person => ({...Object.values(person)[0], gender: ''}));
console.log(people);

Struggling to iterate through the response.data as intended

Answer №1

Answer №2

Similar questions

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

Guide to using Vue.js and Vue Router to create a sub menu for the children of the current route

Identifying the Nearest Div Id to the Clicked Element

The React Native application is working fine on the emulator but is encountering some issues when trying

Verify the dates in various formats

Changing a class and audio and storing it using browser's local storage

Hold off on submitting the form until the location has been obtained

Encountering a Sass Dart error "Bad state: Can't access parent outside of a module" while running npm start in a Create React App

Personalized VueJS Counter

What is the best way to retrieve IMDB movie data using AJAX?

Exploring the data within Vue components

Tips for dynamically populating an HTML table with data from a JSON array using JQuery

What kind of data type should the value property of Material UI TimePicker accept?

What is the solution for displaying just a single panel?

Unable to display Klout topics using Ajax Json

When attempting to install an npm package from a local directory, I encountered a 404 Not Found error, despite the package existing in the node_modules directory

Updating items within an array in a MongoDB collection

CSS table property remains unchanged following an ajax request

Saving the current date in MongoDB using the save method

What could be causing my MongoDB Node.js driver's $lookup aggregation query to not produce the expected results?