CODEWITHSUNDEEP
javascriptreactjsaxioses6-promise
Rachel
Rachel

Reputation: 727

How to iterate over an array of nested objects that seems to be paginated?

I am receiving a payload via axios which is an object. Inside this object there is an array named "locations" For each index in the array there is an object with properties. I am trying to iterate over this object by setting state and have tried a lot permutations but can't seem to get it.

Here is the structure of the returned data from from axios API call which is paginated which I think is clouding my noggin to the way to access it.

{status: "success", data: {…}}
    data:
        locations: Array(311)
        [0 … 99]
        [100 … 199]
        [200 … 299]
        [300 … 310]
        length: 311
    __proto__: Array(0)
    __proto__: Object

If I expand in Chrome Tools I see this:

[0 … 99]
    0:
        deviceId: 471
        lat: 37.77335
        lon: -122.3863333
        spotterId: "SPOT-300434063282100"
        timestamp: "2019-06-10T19:35:01.000Z"
        __proto__: Object
    1:
        deviceId: 444
        lat: 37.77345
        lon: -122.38695
        spotterId: "SPOT-0319"
        timestamp: "2019-06-10T05:07:31.000Z"
        __proto__: Object

So, you can expand the [0...99] entries, then [100-199] and so on...

I tried the following code to call and iterate in react:

  state = { 
    locations: [] 
  };

  async componentDidMount() {

    try {
      const response = await axios({
        method: 'get',
        url: `my API url`,
        headers: {
          'token': token
        }
      })
      .then(res => {
        const locations = res.data;
        console.log(locations);
        this.setState({ locations });
      });

    } catch (e) {
        console.log(e);
        return;
    }
  }

I get back the data fine, but iterating over it just to print out each of the attributes....that is another matter. I tried this below. doesn't work. Just the insidious map is not a function error. I don't think I am accessing the data through the right index, or not putting it in state correctly.

render() {

    const { locations } = this.state;

    return (
      <div>
        <ul>
          {locations.map(location => (
            <li key={location.deviceId}>
              {location.deviceId}
              {location.lat}
              {location.lon}
              {location.spotterId}
              {location.timestamp}
            </li>
          ))}
        </ul>
      </div>
    );
  }

Expect result is I want to render to the screen each object and it's properties in the array

Upvotes: 1

Views: 250

Answers (2)

KellyKapoor
KellyKapoor

Reputation: 71

You need to destructure locations from response.data:

state = { 
    locations: [] 
}

async componentDidMount() {

    try {
        const response = await axios({
            method: 'get',
            url: `my API url`,
            headers: {
                'token': token
            }
        })

        const { locations } = response.data
        console.log(locations)

        this.setState({ locations })

    } catch (e) {
        console.log(e)
    }
}

render() {
    // ...
}

Upvotes: 1

Malik Awan
Malik Awan

Reputation: 463

If this is the form of data :

{status: "success", data: {…}}
    data:
        locations: Array(311)
        [0 … 99]
        [100 … 199]
        [200 … 299]
        [300 … 310]
        length: 311
    __proto__: Array(0)
    __proto__: Object

then set the state like this:

state = {
  records:{
      data:{
         location:[]
        }
      }

You are receiving an object. Inside that object there is another object called "data" which holds an array of location. You can then iterate over like this.

render(){
const {records} = this.state;
return{
 <div>
 {records.data.location.map(l => l.deviceId)} // and so on
</div>
}
}

Upvotes: 0

Related Questions