Question

我不知道如何遍历多个嵌套对象以对它们进行映射。

JSON当前看起来像：

 "results": [
    {
        "cars": [
            {
                "brand": "BMW",
                "model": "430i",
                "is_onsale": false
            },
            {
                "brand": "BMW",
                "model": "540i",
                "is_onsale": true

            }
        ]
    }
]

我正在使用axios从URL中获取数据，并且试图在控制台中显示它：

componentDidMount(){
    axios.get('https://randomapi.com/api/****')
    .then(json => json.data.results.map(result => ({
        brand: result.cars.brand,
        model: result.cars.model,
        status: result.cars.is_onsale
      })))
      .then(newData => console.log(newData));
}

然后在所有值上返回undefined。

当我更改为.cars [x]时，我可以获取该特定数组索引的值：

brand: result.cars[0].brand,
model: result.cars[0].model,
status: result.cars[0].is_onsale

我该如何遍历所有对象并将它们存储起来，一个简单的for循环似乎没有与“ .then”一起使用并返回错误。

Answer 1

results是一个数组。数组中的每个条目都有其{strong> own 数组，cars。

从您在问题下的注释中的答案来看，您似乎想将所有这些cars数组合并为一个数组，尽管它们在结果中是分开的数组（大概是出于某种原因））。如果是这样，您可以遍历结果并将每个结果的cars数组中的条目添加到单个组合的cars数组中。例如：

componentDidMount(){
    axios.get('https://randomapi.com/api/****')
    .then(json => {
        const cars = [];
        json.data.results.forEach(result => {
            cars.push(...result.cars);
        });
        return cars;
    })
    .then(allCars => {
        // do something with all the cars
    })
    .catch(error => {
        // do something with the error (report it, etc.)
    });
}

或者，就像几乎所有数组操作一样，您可以将其塞入reduce中，但这不是很清楚，并且会生成许多不必要的临时数组：

componentDidMount(){
    axios.get('https://randomapi.com/api/****')
    .then(json => json.data.results.reduce((all, result) => all.concat(result.cars), []))
    .then(allCars => {
        // do something with all the cars
    })
    .catch(error => {
        // do something with the error (report it, etc.)
    });
}

在React中映射使用Axios解析的嵌套对象

1 个答案: