每个数据数组不同时如何通过API数据进行映射 [英] how to map through API data when each data array is different

问题描述

我正在尝试通过以下API进行映射: https ://api.nasa.gov/neo/rest/v1/neo/browse?api_key = DEMO_KEY

I'm trying to map through this API: https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY

并将数据输入到我的状态，这样我就可以制作Google图表，但是我在如何做某些事情上受阻.

and feed data into my state so I can make a google chart, but I'm stuck on how to do a certain part.

此刻我有这个.

state = {
    data: [
             ['name', 'min estimated diameter', 'max estimated diameter'],
    ],
}

然后当页面运行我的CoponentDidMount()

then when the page runs my CoponentDidMount()

componentDidMount() {
axios.get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY',)
.then((response) => { 

    const restructuredData = response.data.near_earth_objects.map(({name, estimated_diameter,}) => 
        [name, estimated_diameter.kilometers.estimated_diameter_min, estimated_diameter.kilometers.estimated_diameter_max]
    )

    const joined = this.state.data.concat(restructuredData)
    this.setState({data: joined});
})

这应该从API中获取数据，然后创建一个名称分别为minSize和maxSize的对象，然后将其添加到我当前的数据状态下.

this should take the data from the API create an object with the name, minSize and maxSize then add it under my current data state.

目前所有这些都可以正常工作.

All this currently works fine.

问题在于，我还需要绕其运行的行星.

The problem is that I also need the planet it orbits around.

这是我检索到的API的数据原理图

这是close_approach_data中我的主要问题:[]

So here is my main problem in close_approach_data : []

我需要检索orbiting_body，但是当我从API请求数据时，仅20个对象中的大约10个对象具有一个其中包含任何内容的close_approach_data对象，另一半为空.

I need to retrieve orbiting_body but when I request data from the API only about 10 of the 20 objects have a close_approach_data object with anything in them, the other half is empty.

因此Google图表将无法运行，因为最后我的对象中有一半未定义.

so google charts won't run because I end up with undefined in the half my objects.

那我该怎么做才能解决它?

So what can I do to fix it or make it?

推荐答案

close_approach_data是对象数组.似乎它一直在我身边，并且有以下作品:

close_approach_data is an array of objects. It seems like it's always present to me, and the following works:

axios
  .get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY')
  .then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data.map(
          ({ orbiting_body }) => orbiting_body
        )

        return [
          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches
        ]
      }
    )

    const joined = this.state.data.concat(restructuredData)
    this.setState({ data: joined })
  })

输出为:

[
  [ '454266 (2014 FM7)', 0.4411182, 0.9863702813, [] ],
  [ '(1979 XB)', 0.5064714588, 1.1325046106, [ 'Earth' ] ],
  [ '(1993 BD3)', 0.0152951935, 0.0342010925, [ 'Earth', 'Mars' ] ]
]

但是，如果仍然发现close_approach_data有时是未定义的，则只需事先进行检查即可:

However, if you're still finding that close_approach_data is sometimes undefined, just check for it beforehand like:

axios
  .get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY')
  .then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data && close_approach_data.length
          ? close_approach_data.map(({ orbiting_body }) => orbiting_body)
          : [] // If the array doesn't exist, just use an empty array.

        return [
          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches
        ]
      }
    )

    const joined = this.state.data.concat(restructuredData)
    this.setState({ data: joined })
  })

这篇关于每个数据数组不同时如何通过API数据进行映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！