Чтение вложенных данных json с помощью react

Я пытаюсь прочитать вложенный json, который отправляется обратно из вызова url-адреса api places, и у меня возникают проблемы с его чтением всего. Я не могу ничего отправить на консоль, как будто она не работает. Я могу без проблем получить незашифрованный json для чтения. Если кто-то может взглянуть на мой код и мой пример данных json, я был бы признателен!

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      results:[],
    };
  }

  componentDidMount(){
    fetch("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=34.7448,-87.6675&radius=5000&type=restaurant&key=xxxxx")
      .then(response => response.json())
      .then(data => this.setState({results: data.results}));
  }

  render() {
    const { results } = this.state;

    return (
      <div className="App">
        <ul>
          {results.map(result =>
            <li key={result.id}>
            </li>
          )}
        </ul>
      </div>
    );
  }
}

export default App;

Данные JSON:

{
html_attributions: [ ],
next_page_token: "CvQD5wEAAMlYM9qnA7dPRRpXc_romXZ0rACsqjpbHrW9Jed2iPlAPyPcyFLaj9-LN6SahnobyRY1LrKJt9ABLntmdk0_sneRnYQ15cGFp1rUJ9KyzJpFjy0s7w9EA1gQmw1RgelR1WZzD2nX2Q2SZ3YqfWvG4B6iuxPncR8MJ8lgskEcctfU2aZPdcWgF3TuxY6ig1-fBi3Ed6GE4g1UKg7rBw9VbA7PUI4aDp7wIx9nWDqCXFtkfSshm7-lUbWrdND-nWQaEUj55chIvkShUBuYyuhHxI1qbzr__LATXN-_ZhHgxU__kpj3oC8A4ueNxXB4wC5_UAKu0KeLUgmy2_1STUVKKt1hr6CcVU9__wv2q5g9u3ZzbVOqollHmAs5MZHaJOxTreHKGTqQtDOdoUX5KQaItY8El4OAUjp1Dlrhhbp8agH91OjOA9mrSPDU-YCtXFPh_z6S-I_7VDwLJ0W4uRmx1kzi-MGAlxC7RTabWES4vrURvMGOJgbdEXyQAukambnahHSGBhUpBA_nD4hwBcxYZ-OPolCimHMAK9wfEYwt8s-wSf4JWfuoCD1BaoPr2kcMRDuGpOz5u2HUoJMOyrvbo6-lB7S0fxyspswkFFvA-dnZMm60RLN2CJKq69Aw_Rg2DaSb7An5S28v40Q_xOd0Q28SEJHtvCLC3J7_Rlt4TncO88caFHFYScWvmlOcMMcVUOisca0Ne-WP",
results: [
{
geometry: {
location: {
lat: 34.74653499999999,
lng: -87.668218
},
viewport: {
northeast: {
lat: 34.7479832802915,
lng: -87.6668681697085
},
southwest: {
lat: 34.7452853197085,
lng: -87.6695661302915
}
}
},
icon: "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
id: "aeaff0d9129af889d2ce2ebad4bfc083c3d91ca0",
name: "Ruby Tuesday",
opening_hours: {
open_now: false
},
photos: [
{
height: 3024,
html_attributions: [
"<a href="https://maps.google.com/maps/contrib/117021142286141185731/photos">Marcus Kirby</a>"
],
photo_reference: "CmRaAAAAmps7PW42HZPDGKNNCJLfFCn-wY020ErmFSOnwG-FygHoT-vaIEHfIeCl4rCvwrSikuBDEOUbVH5f1f4Vg0XNQn-OJ-JgF5Z1wBxDldr2KKO7ozO6ntTdTNRLARSO7mdjEhAdEenIN2hiMQp4nRjhMooaGhTEeufW9HV9_3v5IQf0amuZaWKqcQ",
width: 4032
}
],
place_id: "ChIJ02hnAy5PfYgRrflPRNUJJ0w",
plus_code: {
compound_code: "P8WJ+JP Muscle Shoals, Alabama, United States",
global_code: "866JP8WJ+JP"
},
price_level: 2,
rating: 3.9,
reference: "ChIJ02hnAy5PfYgRrflPRNUJJ0w",
scope: "GOOGLE",
types: [
"bar",
"restaurant",
"point_of_interest",
"food",
"establishment"
],
vicinity: "1704 Woodward Avenue, Muscle Shoals"
},
{
geometry: {
location: {
lat: 34.7638758,
lng: -87.6682993
},
viewport: {
northeast: {
lat: 34.7652247802915,
lng: -87.66695031970849
},
southwest: {
lat: 34.7625268197085,
lng: -87.66964828029151
}
}
},
icon: "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
id: "2fb41b0632709f6b432883e1766d4dca9a971a43",
name: "Outback Steakhouse",
opening_hours: {
open_now: false
},
photos: [
{
height: 5312,
html_attributions: [
"<a href="https://maps.google.com/maps/contrib/101974447743919752743/photos">Massimiliano Caldi</a>"
],
photo_reference: "CmRaAAAAS-Tkrb_Pszaocvp56KaXs-RcPUPq92MgQOI8AMM5VSZdJsw4CrH2IXUc9ZdSiigA-9gKFnLDqzRSiusyAK3yRGZSH6316ju0XS-4de9LxLIZVF7Eps-Crpqpf8OabUB5EhCovCYnGErZB0QoW33SHtE_GhSRe4kAWb9HEcNSEi_xumkAqPdH1w",
width: 2988
}
],
place_id: "ChIJ3Z2X8sJIfYgRxAhj3l6uvgA",
plus_code: {
compound_code: "Q87J+HM Sheffield, Alabama, United States",
global_code: "866JQ87J+HM"
},
price_level: 2,
rating: 4.3,
reference: "ChIJ3Z2X8sJIfYgRxAhj3l6uvgA",
scope: "GOOGLE",
types: [
"bar",
"restaurant",
"point_of_interest",
"food",
"establishment"
],
vicinity: "4838 Hatch Boulevard, Sheffield"
}
],
status: "OK"
}
codeandbox.io/s/v1vy647133. Если вы посмотрите здесь, вызов googlemapapi не удался. получение ошибки TypeError в catch
Revansiddh 26.10.2018 06:51

@Revansiddh вызов axios не работает из-за этой ошибки: на запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Следовательно, к источнику 'v1vy647133.codesandbox.io' доступ не разрешен.

He Wang 26.10.2018 07:16
0
2
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы пытаетесь использовать веб-службу Google Places API на стороне клиента, тогда как она предназначена для приложений на стороне сервера.

Вероятно, поэтому соответствующие заголовки ответов CORS не устанавливаются сервером.

Ты можешь попробовать

Как использовать CORS для доступа к API Google

или

этот вопрос может помочь

Другие вопросы по теме