Axios Multiple requests to return different object values

Question

I am building a Film grid that return their Id, thumbnail, title, episode number and released date.

How can I display the Object Values on each specific view of species.names?

getSpecies() it returns object value but how can i passed them in render method?

DetailFilms.js Component:

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class DetailFilms extends Component {
  state = {
    film: null,
    specie: null,
  }

  getFilms() {
    let id = this.props.match.params.films_id;
    return axios.get('https://swapi.co/api/films/' + id)
      .then(res => {
        this.setState({
          film: res.data
        })
        // console.log(res)
      })
  }

  getSpecies() {
    let id = this.props.match.params.films_id;
    return axios.get('https://swapi.co/api/species/' + id)
      .then((res) => {
        const species = res.data;
        const keys = Object.keys(species)
        console.log(species)
        this.setState({
          species: res.data.results,
          keys: keys
        })
      })
  }

  componentDidMount() {
    this.getFilms();
    this.getSpecies();
  }
  render() {
    const film = this.state.film ? (
      <div className="jumbotron">
        <h2 className="display-4">{this.state.film.title}</h2>
        <p className="lead">{this.state.film.director}</p>
        <hr className="my-4" />
        <p>{this.state.film.producer}</p>
        <p>Episode Nº: {this.state.film.episode_id}</p>
        <p className="font-italic">{this.state.film.opening_crawl}</p>
        <p>Species: {this.state.film.species.name}</p>
        <Link className="btn btn-primary btn-lg" to="/" role="button">Character</Link>
      </div>
    ) : (
      <div className="spinner-border" role="status">
        <span className="sr-only">Loading...</span>
      </div>
    )
    return (
      <div className="d-flex justify-content-center align-items-center ">
        {film}
      </div>
    )
  }
}

export default DetailFilms;

CodeSandbox Demo & Api Documentation Swapi

axios.get does not return a value, thus your getSpecies() call will always return nothing.. Axios is a promise-based API. For usage see: github.com/axios/axios/blob/master/README.md — EJK
– EJK, Commented Feb 4, 2019 at 19:39

quirimmo · Accepted Answer · 2019-02-04 19:43:43Z

2

The props you are passing in with the route, it is called films_id not species_id.

So in your getSpecies method, this is how you should get the id of the current movie:

let id = this.props.match.params.films_id;

Then if you see the species api: https://swapi.co/api/species/

if you query it through the id, you will get the specie corresponding to that id, which is not the species of that movie.

In order to get all the species of that movie, you need to do an HTTP get request to the root https://swapi.co/api/species/ and then check all the results which have as film the one for which you are seeing the details. These will be all the species of that movie.

answered Feb 4, 2019 at 19:43

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

4 Comments

mdiiorio Over a year ago

Thks! But how can i pass in render method species.name values?

quirimmo Over a year ago

in that species field, what do you want to display? in general all the species, or all the species of that movie?

mdiiorio Over a year ago

All the species of that movie

quirimmo Over a year ago

this is an example of how you display them, but you need to query also the other pages because all the species are 37, and the api returns 10 results for each page: codesandbox.io/s/o4j7j1m94q I just did for the first page to show you how to do it

Collectives™ on Stack Overflow

Axios Multiple requests to return different object values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related