how to fetch the data from the response like array format using reactjs

Question

Am newbie in reactjs. it might be a duplicate question. Actuallly i need to show the movie name from imdb file. Am getting response from the IMDB file. But cant able to show the movie name. Please look at the below code

import React from 'react';

class App extends React.Component {
   constructor() {
      super();

      this.state = {
         items: 
         [

         ]
      }

   }
  componentDidMount() {
    this.UserList();
  }

  UserList() {

    fetch('https://theimdbapi.org/api/find/person?name=Kamal+Haasan')
    .then(items=>{
        const posts = items[0].filmography(obj => obj.soundtrack);
        console.log(posts)
        this.setState({ posts })
  }
}

   render() {
      return (
         <div>
            <div>
               {this.state.items.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}

export default App;

Can anone please help on this. I have to show the movie name which i need to get from the API call.

Thanks in advance

You will probably find that the fetch call is returning you a string, not json. You can convert it using JSON.parse() — Mikkel
– Mikkel, Commented Sep 19, 2017 at 3:39
question, is there a reason why you have UserList() as a function outside of componentDidMount when you call it only once? Why not just call the fetch function in componentDidMount()? — JaeGeeTee
– JaeGeeTee, Commented Sep 19, 2017 at 3:40
also, i don't see where you close your .then() function call.... do you close the curly brace of the arrow function items=>{ — JaeGeeTee
– JaeGeeTee, Commented Sep 19, 2017 at 3:43
@JaeGeeTee Dear closed the then function. cant able to show alert when i put inside then function — Idris
– Idris, Commented Sep 19, 2017 at 3:48

Arun Redhu · Accepted Answer · 2017-09-19 04:37:12Z

1

You have some problems with your fetch call. fetch response is a readable stream so you have to read that with the appropriate method. I had done some of the modification in your code. Here is the complete working code to display the movies name.

import React from 'react';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      posts: []
    }

    this.UserList = this.UserList.bind(this);

  }
  componentDidMount() {
    this.UserList();
  }

  UserList() {

    fetch('https://theimdbapi.org/api/find/person?name=Kamal+Haasan').then(response => {
      return response.json();
    }).then(data => {
      const posts = data[0].filmography.soundtrack;
      this.setState({posts});
    });

  }

  render() {
    return (
      <div>
        <div>
          {
            this.state.posts.map((item, i) => {
              return <Content item={item} key={i}/>
            })
          }
        </div>
      </div>
    );
  }
}

class Content extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.item.title}</div>
      </div>
    );
  }
}

export default App;

answered Sep 19, 2017 at 4:37

Arun Redhu

1,59913 silver badges16 bronze badges

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

3 Comments

Idris Over a year ago

Still am getting issues. Uncaught (in promise) TypeError: Cannot read property '0' of null

Idris Over a year ago

Response for the service mentioned in the post. please help it out

Idris Over a year ago

[{filmography:{soundtrack:[]}}]

Collectives™ on Stack Overflow

how to fetch the data from the response like array format using reactjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related