samedi 27 octobre 2018

Reading Nested JSON Data With React

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




Aucun commentaire:

Enregistrer un commentaire