Htykuut

I am currently working on an app and have gotten stuck. I have created a XMLHttp request and need to pull the information from it and put it into an array so I can create markers out of the request on a google map. The code is:

import React, { Component } from 'react';

import { Map, InfoWindow, Marker, GoogleApiWrapper

} from 'google-maps-react';





//"https://api.foursquare.com/v2/venues/search?ll=40.7589,-73.9851&query=food&radius=2000&categoryId=4d4b7105d754a06374d81259&client_id=INOHETWKCQHOZUPUATJJ503RCWMUXPFUOCJCHRN2LRADAZJO&client_secret=1ABUWB4S3QS41A50X1UJFHC4THA2YQGOBNOBUSRARLZ4DE5W&v=20201215&limit=25"

const Http = new XMLHttpRequest();

const url = "https://api.foursquare.com/v2/venues/search? ll=40.7589,-73.9851&query=food&radius=2000&categoryId=4d4b7105d754a06374d81259&client_id=INOHETWKCQHOZUPUATJJ503RCWMUXPFUOCJCHRN2LRADAZJO&client_secret=1ABUWB4S3QS41A50X1UJFHC4THA2YQGOBNOBUSRARLZ4DE5W&v=20201215&limit=25"

Http.open('GET', url)

Http.send();



Http.onreadystatechange=(e)=>{

  console.log(Http.responseText)

}







var  AllPlaces = [







]



class MapContainer extends Component {

state = {

showingInfoWindow: false,

activeMarker: {},

selectedPlace: {},

query:'',

filteredPlaces: 

};



markers = 





onMarkerClick = (props, marker, e) => {

this.setState({

selectedPlace: props,

activeMarker: marker,

showingInfoWindow: true

});

}



onLiClick = (i) =>{

this.setState({

showingInfoWindow: true,

activeMarker: this.markers[i],

selectedPlace: AllPlaces[i]

})

}





onMapClicked = (props) => {

if (this.state.showingInfoWindow) {

this.setState({

showingInfoWindow: false,

activeMarker: null

})

}

}





CreateInputField = () => (

<input

placeholder = "Search Nearby Places"

onChange={(event) => this.setState({filteredPlaces: AllPlaces.filter(place 

=> !place.name.startsWith((event.target.value).toLowerCase()))})}

/>

)



render() {

return (

<div className = 'map-container' role='application' style=

{{marginleft:'250px'}}>

<div>

  <div className = 'navMenu'>

    <div className = 'List'>

      <h1 className = 'title'> Places to Eat

</h1>

        {this.CreateInputField()}

    </div>

    <div className = 'PlaceList'>

      <ol className='Places'>

        {AllPlaces.map((arrayItem, index)=>

        !this.state.filteredPlaces.includes(arrayItem) &&

          <li

          key = {index}

          className='Place'

          onClick={() => {this.onLiClick(index)}}

          >{arrayItem.name}</li>

        )}

      </ol>

    </div>

  </div>

</div>

<Map google={this.props.google} zoom={14}

  initialCenter = {{lat:40.7589, lng:-73.9851}}

  onClick={this.onMapClicked}>

  {AllPlaces.map((marker, i) =>

    !this.state.filteredPlaces.includes(marker) &&

      <Marker

      ref={(e) => {if (e) this.markers[i] =

  e.marker}}

      onClick={this.onMarkerClick}

      title = {marker.name}

      key = {i}

      name={marker.name}

      position =

{{lat:marker.lat,lng:marker.lng}}

      />

  )}

  <InfoWindow

    onOpen={this.windowHasOpened}

    onClose={this.windowHasClosed}

    marker={this.state.activeMarker}

    visible={this.state.showingInfoWindow}>

    <div>

      <h1>{this.state.selectedPlace.name}</h1>

    </div>

  </InfoWindow>

</Map>

</div>

);

}

}



export default GoogleApiWrapper({

apiKey: 'AIzaSyD2BmXOGrCZQiAg5HJ6hU70BXc5v6Osr6M'

})(MapContainer)

I need to take in information I get from the XML request and put each object into the array I have at the top called AllPlaces I have tried with response and response text but have no idea how to loop through the JSON object that is returned.