how to map through API data when each data array is different

问题

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

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

At the moment I have this.

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

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

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.

this is data schematic for API I retrieve

So here is my main problem in 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.

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?

回答1:

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

The output is:

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

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

回答2:

Check Array.isArray(close_approach_data) && close_approach_data.length > 0 before you do anything with it?

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

来源：https://stackoverflow.com/questions/59695738/how-to-map-through-api-data-when-each-data-array-is-different

标签

reactjs

get

axios