как отобразить данные API, когда каждый массив данных отличается - PullRequest
Новая
       5

как отобразить данные API, когда каждый массив данных отличается

0 голосов
/ 11 января 2020

Я пытаюсь сопоставить через этот API: https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY

и передать данные в мое состояние, чтобы я мог создать диаграмму Google, но я застрял на том, как сделать определенную часть.

На данный момент у меня есть это. 

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, а затем добавьте его под моим текущим состоянием данных.

Все это в настоящее время работает нормально.

Проблема в том, что я тоже нужно, чтобы pl anet вращался вокруг него.

это схемы данных c для API, которые я получаю

Так вот моя главная проблема в close_approach_data: []

Мне нужно получить orbiting_body, но когда я запрашиваю данные у API, только около 10 из 20 объектов имеют объект close_approach_data с чем-либо в них, другая половина пуста.

, поэтому диаграммы Google не будет работать, потому что я получаю неопределенное в половине своих объектов.

Так что я могу сделать, чтобы это исправить или сделать это?

Ответы [ 2 ]

0 голосов
/ 11 января 2020

Проверьте 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
    ]
  }
)
0 голосов
/ 11 января 2020

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