How can i get the values of actor names from the below given json. I am able to get rest of the values but not actor names

Question

this is what my JSON response looks like. I could get the values of id and title etc but not actor since actor is another array inside the json object. below is what my react code looks like. I tried several options but always end up with error of undefined property.

```
    {
    actor: [
    {
    name: "Leonardo DiCaprio"
    },
    {
    name: "Kate Winslet"
    }
    ],
    _id: "5e973eef8af37634940e9a5b",
    title: "Titanic",
    director: "James Cameron",
    genre: "Romantic",
    imageURL: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fencrypted-tbn0.gstatic.com%2Fimages%3Fq%3Dtbn%3AANd9GcQhYjUIu2o5v5u3rfJpCq5Cz0Q9WK--XdYxai_N2d0ImohPiIOp&psig=AOvVaw1SjoYtMGvlUsg-hW-iHO8c&ust=1588932208988000&source=images&cd=vfe&ved=0CA0QjhxqFwoTCMjSivG_oekCFQAAAAAdAAAAABAD",
    __v: 0
    }

```

My React code looks like this.

```
class MovieDetails extends Component 
    {
        constructor(props) {
          super(props);
          this.state = {
            movie: [],

            isLoaded: false,
          }

        }      
        componentWillMount() {
            let id = this.props.id;
            fetch(`http://localhost:5000/movie/details/${id}`)
            .then(res => {
              return res.json();})
            .then(movie => {
                this.setState({ movie });
            })

            .catch(console.log('error'));
        }        
        render() {
          return (
            <div className="container">
            <div className ="centre">
            <div className="col-xs-12"> 
            {this.state.movie.map((movie => (                  

                <div class="container" >
                    <div>
                        <h3>{movie.title}</h3>
                        <img src={movie.imageURL}  className="img-responsive"  height = "120" width ="120"/>
                        <h5 className="card-genre" >Genre : {movie.genre}</h5>
                        <h5 className="card-director">Directed by : {movie.director}</h5>

                    </div>
                </div>


            )
          ))}

          </div>
         </div>
         </div>
        );
      }
    }
    export default MovieDetails;
```

Where are you trying to access the actor array in your code? — Surya, May 07 '20 at 17:32
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Heretic Monkey, May 07 '20 at 17:51
@Owner right after the line where i am accessing director name. — abhijeet jain, May 07 '20 at 18:53

fahimchowdhury · Answer 1 · 2020-05-07T17:48:29.253

0

Try using this code inside the div

  {
    movie.actor.map(actor=>(
     <div>{actor.name}</div>
    ))
  }

You can display it in lists by using li tag instead of div or whatever way you desire

edited May 07 '20 at 17:48

answered May 07 '20 at 17:39

fahimchowdhury

424
4
8

It might be this.state.movie.actor.map(), since @abhijeetjain, has a setState function that is updating movie value – Surya May 08 '20 at 03:30
@abhijeetjain is already iterating the movie state, and from the information he provided, he is successfully getting the value of title, genre, director etc. In that case, the code I provided supposed to work – fahimchowdhury May 08 '20 at 07:38
@abhijeetjain, place the code the line after you are accessing the director name, where you intended to. – fahimchowdhury May 08 '20 at 07:41
@Mohammed Fahim , it worked but not the way your suggested. But thanks for the help , your suggestion gave me a hint on how to do it. – abhijeet jain May 08 '20 at 10:59

How can i get the values of actor names from the below given json. I am able to get rest of the values but not actor names

1 Answers1