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

https://codesandbox.io/s/v1vy647133. If you look here you googlemapapi call is not successful. getting error `TypeError` in catch — Revansiddh, Oct 26 '18 at 04:51
@Revansiddh the axios call doesn't work because of this error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://v1vy647133.codesandbox.io' is therefore not allowed access. — He Wang, Oct 26 '18 at 05:16

score 2 · Accepted Answer · answered Oct 27 '18 at 16:29

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

Reading Nested JSON Data With React

1 Answers1