遍历 response.data 未按预期工作

Question

假设我的 response.data 是：

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

如果我想为每个人添加一个gender 字段，我尝试通过这样的地图函数来完成：

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

这只会将一个gender 字段添加到response.data，而不是每个人。做错了什么？

我想要的结果是：

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

Answer 1

根据您的响应结构，您可以提取第一个 reponse.data 条目（这将返回包含键和值的数组数组）。

在你可以使用 reduce 之后，第一个参数是累加器，第二个参数是你正在迭代的当前 [key, value]。 value 是数组，因为 value[0] 是对象，您可以将下一个数组创建为 [ { 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

您没有遍历response.data 中的嵌套对象。 [response.data] 用一个元素创建一个数组，该元素是整个 response.data 对象。然后将gender 属性添加到该对象，并返回一个包含该对象的数组。

您应该遍历response.data 的元素。您可以使用Object.values() 来获取这些值的迭代器。

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

工作演示：

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);