Help with React API request

Help with React API request
0

#1

I’m trying to work with a movie API and send a request in a React program using the Axios library. I’m able to retrieve the data and console.log it but I’m struggling to map through the data and display it in a React component.

I used this example that makes a request to the Reddit API to base my approach off of:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)
      .then(res => {
        const posts = res.data.data.children.map(obj => obj.data);
        this.setState({ posts });
      });
  }


  render() {
    return (
      <div>
        <h1>Top stores from Reddit/hockey</h1>
        <ul>
          {this.state.posts.map(post =>
              <li key={post.id}>{post.title}</li>
            )}
        </ul>
      </div>
    );
  }
}


ReactDOM.render(
  <App subreddit="hockey"/>,
  document.getElementById('render-target')
);

This works and fetches the Reddit API. I’m trying to modify it to work with the movie API I’m using, like this:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=03b9a40695aae1f4e99a42e90e012e9e&language=en-US&page=1`)
      .then(res => {
        const posts = res.data.results.map(obj => obj.data);
        console.log(res.data.results[3].original_title);
        this.setState({ posts });
      });
  }

  render() {
    return (
      <div>
        <h1>Movie API data</h1>
        <ul>
          {this.state.posts.map(post =>
              <li key={post.id}>{post.title}</li>
            )}
        </ul>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('render-target')
);

I’m about to console.log the data but how can I map through the entire JSON response and map all the movies?


#2

Here’s what the JSON data looks like. How would I go through this JSON data and get the title of every movie for example?

https://api.themoviedb.org/3/movie/now_playing?api_key=03b9a40695aae1f4e99a42e90e012e9e&language=en-US&page=1

        const posts = res.data.results.map(obj => obj.data);

This doesn’t seem to work.


#3

The results objects don’t have a data property, so that would return undefined. You’ll probably want title or original_title.


#4

Here’s an example of the output from the API if you access res.data.results:

{ 
    vote_count: 2291,
    id: 284053,
    video: false,
    vote_average: 7.5,
    title: 'Thor: Ragnarok',
    popularity: 676.992626,
    poster_path: '/oSLd5GYGsiGgzDPKTwQh7wamO8t.jpg',
    original_language: 'en',
    original_title: 'Thor: Ragnarok',
    genre_ids: [ 28, 12, 35, 14, 878 ],
    backdrop_path: '/5wNUJs23rT5rTBacNyf5h83AynM.jpg',
    adult: false,
    overview: 'Thor is imprisoned on the other side of the universe and finds himself in a race against time to get back to Asgard to stop Ragnarok, the prophecy of destruction to his
homeworld and the end of Asgardian civilization, at the hands of an all-powerful new threat, the ruthless Hela.',
    release_date: '2017-10-25' }

Let’s say you set posts as res.data.results (as you do above) - the results part is an array of objects like the one above.

When you map over that array your current code reads roughly as the following:

“For each thing I’ll call an obj in the array, return the data value it has”

The trouble is, it has no ‘data’ property…


Also, too slow. @portablestick said it way more succinctly :slight_smile:


#5

Yeah thanks guys, that got the request working.

One more noob React question. The request works and the unordered list in my render function is displaying but it’s only displaying the li bullet points, it’s not displaying the actual titles. I’m getting this error:

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of App.

What’s wrong with my ul/li in the render function?