Can't seem to access values in object in javascript using dot or array notation

Question

So I get data from an external api (omdbapi) and the exact data looks like follows with a title of Star:

{"Search":[{"Title":"Star Wars: Episode IV - A New Hope","Year":"1977","imdbID":"tt0076759","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode V - The Empire Strikes Back","Year":"1980","imdbID":"tt0080684","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VI - Return of the Jedi","Year":"1983","imdbID":"tt0086190","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VII - The Force Awakens","Year":"2015","imdbID":"tt2488496","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SX300.jpg"},{"Title":"Star Wars: Episode I - The Phantom Menace","Year":"1999","imdbID":"tt0120915","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYTRhNjcwNWQtMGJmMi00NmQyLWE2YzItODVmMTdjNWI0ZDA2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode III - Revenge of the Sith","Year":"2005","imdbID":"tt0121766","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNTc4MTc3NTQ5OF5BMl5BanBnXkFtZTcwOTg0NjI4NA@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode II - Attack of the Clones","Year":"2002","imdbID":"tt0121765","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMDAzM2M0Y2UtZjRmZi00MzVlLTg4MjEtOTE3NzU5ZDVlMTU5XkEyXkFqcGdeQXVyNDUyOTg3Njg@._V1_SX300.jpg"},{"Title":"Star Trek","Year":"2009","imdbID":"tt0796366","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjE5NDQ5OTE4Ml5BMl5BanBnXkFtZTcwOTE3NDIzMw@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VIII - The Last Jedi","Year":"2017","imdbID":"tt2527336","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjQ1MzcxNjg4N15BMl5BanBnXkFtZTgwNzgwMjY4MzI@._V1_SX300.jpg"},{"Title":"Rogue One: A Star Wars Story","Year":"2016","imdbID":"tt3748528","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjEwMzMxODIzOV5BMl5BanBnXkFtZTgwNzg3OTAzMDI@._V1_SX300.jpg"}],"totalResults":"2895","Response":"True"}

I'm doing it in react native and this object called movies is being passed as props. The code is as follows:

const MoviesList = props => {

    return 
    <Text>
        {props.movies.Search.forEach((movie) => {
            movie.Title
        })}
    </Text>
}

All I get is undefined and none of the data is rendered.

Is the obj available in your code at that moment, or does obj get overwritten by another value? — Mouser
– Mouser, Commented Mar 21, 2020 at 17:22
I am guessing, that the problem is in the context in which you are trying to access this code. You need to provide us with this context. When is the obj accessed? — Kostas Minaidis
– Kostas Minaidis, Commented Mar 21, 2020 at 17:23

Matt Croak · Accepted Answer · 2020-03-21 18:35:18Z

1

You cannot use forEach when you're trying to render child elements/components since forEach does not actually return anything new it simply loops through an existing collection. You can make changes to the items as they are looped through but a new collection is not created or returned.

You should use map instead.

I am not sure what Text is, like if it's your own component or from a library but if it's your own component and you want to render the titles within that component, you should wrap your loop within the <Text> component but rather pass the title to <Text>.

See below in MoviesList.js

<div>

  {props.movies.Search.map((movie) => {
    return <Text title={movie.Title}/>
  })}

</div>

I made a code sandbox for the full code.

EDIT

If the response from the API is coming back as a string instead of an object, you can use JSON.parse(YOUR_RESULTS) to convert your string into an object.

To see if the results are in fact a string, you can perform YOUR_RESULTS.split("") and see if an array is returned. You can also do console.log(typeof YOUR_RESULTS). If it is in fact a string, "string" will be logged in the console.

edited Mar 21, 2020 at 18:35

answered Mar 21, 2020 at 17:57

Matt Croak

2,8082 gold badges23 silver badges43 bronze badges

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

9 Comments

Omi11 Over a year ago

Thank you. Problem is, props.movies.Search seems to be undefined and when I try to do map every single character gets rendered individually, even those outside of search

Matt Croak Over a year ago

What does console.log(props.movies) log? If it is undefined then you are not passing your props correctly. Wherever you're rendering your MovieList component needs to have access to the object. If you see the codesandbox I provided the props are passed and the values are rendered correctly.

Omi11 Over a year ago

It returns the full movie list with everithing including Search and Response. When I try to access Search though it returns undefined

Matt Croak Over a year ago

Can you share what the response looks like? I am assuming Search would correspond to an input search. When I tried the API online it only showed options to search by title or id.

Omi11 Over a year ago

OMG IT WORKS THANK YOU SO MUCH HAVE A NICE DAY

|

Collectives™ on Stack Overflow

Can't seem to access values in object in javascript using dot or array notation

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related