Как получить данные из API и превратить их в список массивов для Google Charts - PullRequest
Новая
       28

Как получить данные из API и превратить их в список массивов для Google Charts

1 голос
/ 10 января 2020

Я довольно новичок в React и в настоящее время пытаюсь использовать Nasa neo API для подачи данных в диаграмму реагирования Google.

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

class MainPage extends Component {
  state = {
    data: [['name', 'max estimated diameter', 'min estimated diameter']]
  };

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

      .then(response => {
        this.setState({ data: response });
      })
      .catch(function(error) {
        console.log(error);
      });
  }
}

это то, что у меня есть, наверное, я мне нужно отобразить данные, но все, что я пробовал до сих пор, похоже, не работает.

кто-нибудь знает, как мне поступить?

или есть какие-либо указатели?

Ответы [ 2 ]

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

Из документации swagger я вижу, что конечная точка /neo/browse возвращает что-то вроде этого: 

{
  "is_potentially_hazardous_asteroid": true,
  "is_sentry_object": true,
  "neo_reference_id": "string",
  "name": "string",
  "name_limited": "string",
  "designation": "string",
  "nasa_jpl_url": "string",
  "absolute_magnitude_h": 0,
  "estimated_diameter": {},
  "close_approach_data": [
    {
      "close_approach_date_full": "string",
      "close_approach_date": "string",
      "epoch_date_close_approach": 0,
      "relative_velocity": {},
      "miss_distance": {},
      "orbiting_body": "string"
    }
  ],
  "orbital_data": {},
  "sentry_data": "string"
}

Это JSON, поэтому вы хотите получить поля и затем сохраните их в своем состоянии.

Из диаграммы реагирования Google API Я вижу, что мы хотим, чтобы данные были массивом массивов, например: 

const data = [
  ["Column1", "Column2"],
  ["row1_column1", "row1_column2"],
  ["row2_column1", "row2_column2"],
// ...
];

Что бы я сделал: 

      .then(response => {
        this.state.data
        this.setState({
            data: [
                ...this.state.data
                [
                    response.data.name,
                    response.data.estimated_diameter.kilometers.estimated_diameter_max,
                    response.data.estimated_diameter.kilometers.estimated_diameter_min
                ]
            ]
        })

По сути, мы добавляем новый массив с тремя значениями, которые мы хотим, к уже существующим данным. Чтобы извлечь значения из JSON, которые мы получили от API, нам просто нужно посмотреть на ответ, который мы получим, опробовав API на swagger.

Также помните, что setState() является асинхронным .

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

Поскольку вы используете Ax ios, ваш запрос get вернет объект с ключом data. 

.then(({data}) => { // destructure data from response object
    // {name, estimated_diameter} from data
    const restructuredData = data.near_earth_objects.map(({name, estimated_diameter}) => 
        [name, estimated_diameter.metrics. estimated_diameter_max, estimated_diameter.metrics.estimated_diameter_min])

    this.setState({data: restructuredData});
})
.catch(function (error) {
  console.log(error);
})

Ax ios схема ответа для вашей справки https://github.com/axios/axios#response -schema

...