当每个数据数组不同时如何映射API数据

Question

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

并将数据输入我的状态，以便我可以制作谷歌图表，但我被困在如何做某部分。

目前我有这个。

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

然后当页面运行我的 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 is data schematic for API I retrieve

所以这是我在 close_approach_data 中的主要问题：[]

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

所以谷歌图表将无法运行，因为我的一半对象最终都未定义。

那么我能做些什么来修复它或制造它呢？

Answer 1

close_approach_data 是一个对象数组。似乎它总是出现在我面前，并且以下工作：

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 有时未定义，请事先检查它，例如：

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

Answer 2

在对它进行任何操作之前检查Array.isArray(close_approach_data) && close_approach_data.length > 0？

const restructuredData = response.data.near_earth_objects.map(({ name, estimated_diameter, close_approach_data }) => {

    const isCloseApproachDataValid = Array.isArray(close_approach_data) && close_approach_data.length > 0

    const closeApproachesData = isCloseApproachDataValid? close_approach_data.map(data => {
        // do what you want to do here
    }) : null

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