Reading Nested JSON Data With React

Question

I am trying to read nested json that is being sent back from a places api url call and I'm having issues with it reading it all. I can't send anything to the console like its not working. I can get unested json to read with no problem. If someone can take a look at my code and my json data example I would appreciate it!

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 Data:

{
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"
}

Answer 1

You are trying to use the Google Places API Web Service on client side whereas it is designed for server side applications.

That's probably why appropriate CORS response headers are not set by the server.

You can try

How to use CORS to access Google APIs

or

this question might help