How to go through multidimensionnal array from API with Reactjs

Question

After many attempts I fail to use arrays from https://swapi.co/api/ What I want is to use data from people and films.

I have 2 files : App.js

import React, { Component } from "react";
import List from './List';

const API = 'https://swapi.co/api/';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: []
    };
  }

  componentWillMount() {
    this.fetchData();
  }

  fetchData = async () => {
    const response = await fetch(API);
    const json = await response.json();
    this.setState({ 
      data: json.data
    });
  };

  render() {
    return (
      <List data={this.state} />
    );
  }
}

List.js

import React, { Component } from 'react';
import Person from './Person';

class List extends Component {
  render() {
    const { data } = this.props;

    const { results } = data;

    return (
      <div className="flex-grow-1">
        <div className="row mb-5">{results}</div>
      </div>
    );
  }
}

export default List;

So, how do I go through that array to get what data I want to display ? I'd like to render people -> results and films -> results

When you are rendering the <List /> component, you pass the data prop as data={this.state}, so in <List />, this.props.data will be { data: [{jsondata}] }. You will need to either pass data={this.state.data} to the component, or deconstruct like const { data: { data } } = this.props — JSONaLeo
– JSONaLeo, Commented Apr 7, 2019 at 15:56
Thanks for the response, it still gets me that results is undefined when I do <List data={this.state.data} /> — mttetc
– mttetc, Commented Apr 7, 2019 at 16:01

JSONaLeo · Accepted Answer · 2019-04-07 16:09:50Z

1

results would be undefined since results is not a node within your data object... try removing the line const {results} = data and in the return map the data array:

    return (
      <div className="flex-grow-1">
        {
           data.map((results, i) => {
               return (<div key={i} className="row mb-5">{results}</div>);
           })
        }
      </div>
    );

you will need the key to avoid React's unique key warning

answered Apr 7, 2019 at 16:09

JSONaLeo

4167 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

n9iels · Accepted Answer · 2019-04-07 16:05:53Z

0

So this code as it is now will fetch the single object that acts as a map of other urls for entities in this API. what you want to do is modify fetchData so it accepts a url. At that moment you can do an initial request to /api, read the url from the result for people and films and call fetchData again with these urls. The received data can be saved inside the state.

A example for the implementation of componentWillMount() and fetchData():

componentWillMount() {
    this.fetchData('https://swapi.co/api/')
      .then(res => {
        this.fetchData(res.people).then(people => alert(JSON.stringify(people)));
        this.fetchData(res.films).then(people => alert(JSON.stringify(people)));
      });
}

async fetchData(url) {
      const response = await fetch(url);
      return response.json();
};

The most important change is that fetchData now returns a promise. That allows us to use the then method to use the result of the first request. You can replace the alert with a setState implementation for yourself.

answered Apr 7, 2019 at 16:05

n9iels

8947 silver badges21 bronze badges

1 Comment

mttetc Over a year ago

I'm struggling getting it to work, I made a jsfiddle with the code : jsfiddle.net/75fspc1j/1 How can I use people.results in my <List /> component ?

Collectives™ on Stack Overflow

How to go through multidimensionnal array from API with Reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related