json loop through though nested array

Question

I have this json result:

{"Search":[
 {"Title":"Batman Begins","Year":"2005","imdbID":"tt0372784","Type":"movie","Poster":"N/A"},
 {"Title":"Batman v Superman: Dawn of Justice","Year":"2016","imdbID":"tt2975590","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"},
 {"Title":"Batman","Year":"1989","imdbID":"tt0096895","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_SX300.jpg"},{"Title":"Batman Returns","Year":"1992","imdbID":"tt0103776","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BODM2OTc0Njg2OF5BMl5BanBnXkFtZTgwMDA4NjQxMTE@._V1_SX300.jpg"},
 {"Title":"Batman Forever","Year":"1995","imdbID":"tt0112462","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BNWY3M2I0YzItNzA1ZS00MzE3LThlYTEtMTg2YjNiOTYzODQ1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"},{"Title":"Batman & Robin","Year":"1997","imdbID":"tt0118688","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_SX300.jpg"},
 {"Title":"Batman: The Animated Series","Year":"1992–1995","imdbID":"tt0103359","Type":"series","Poster":"http://ia.media-imdb.com/images/M/MV5BMTU3MjcwNzY3NF5BMl5BanBnXkFtZTYwNzA2MTI5._V1_SX300.jpg"},
 {"Title":"Batman: Under the Red Hood","Year":"2010","imdbID":"tt1569923","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTMwNDEyMjExOF5BMl5BanBnXkFtZTcwMzU4MDU0Mw@@._V1_SX300.jpg"},
 {"Title":"Batman: The Dark Knight Returns, Part 1","Year":"2012","imdbID":"tt2313197","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMzIxMDkxNDM2M15BMl5BanBnXkFtZTcwMDA5ODY1OQ@@._V1_SX300.jpg"},
 {"Title":"Batman: The Dark Knight Returns, Part 2","Year":"2013","imdbID":"tt2166834","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTQ1Mjk1NTY2NV5BMl5BanBnXkFtZTgwMTA2MDEwNzE@._V1_SX300.jpg"}],
 "totalResults":"312",
 "Response":"True"
}

I'm trying to loop through the array and post each "movie" into separate div block, I can't seem to retrieve the information correctly from the array...

I tried this code and it works fine when using javascript alert()... but as soon as I want to .text() the information I get TypeError: undefined is not an object...

Here is the code that works with the alert, but not for .text()

$.ajax(search_sUrl, {
 complete: function(p_oXHR, p_sStatus){
 oData_search = $.parseJSON(p_oXHR.responseText);
 for(var i = 0; i <= oData_search.totalResults; i++) {
 alert(oData_search["Search"][i].Title); 
 }
 }
});

• eithed: Can you please add how are you using text()
• user1106925: i <= should be i < if .totalResults represents the typical .length of an Array.
• Alexandru Vlas: for example $movie_container.find('.movie_block').text(oData_search["Search"][i].Title);
• charlietfl: as pointed out you are going past end of array , last iteration would throw that error
• Xotic750: Does oData_search.totalResults really equal the array length oData_search.Search.length?

Answer 1

1. use oData_search.Search.length to get the array size
2. use i < oData_search.Search.length instead of <=

var oData_search = {
 "Search": [{
 "Title": "Batman Begins",
 "Year": "2005",
 "imdbID": "tt0372784",
 "Type": "movie",
 "Poster": "N/A"
 }, {
 "Title": "Batman v Superman: Dawn of Justice",
 "Year": "2016",
 "imdbID": "tt2975590",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"
 }, {
 "Title": "Batman",
 "Year": "1989",
 "imdbID": "tt0096895",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_SX300.jpg"
 }, {
 "Title": "Batman Returns",
 "Year": "1992",
 "imdbID": "tt0103776",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BODM2OTc0Njg2OF5BMl5BanBnXkFtZTgwMDA4NjQxMTE@._V1_SX300.jpg"
 }, {
 "Title": "Batman Forever",
 "Year": "1995",
 "imdbID": "tt0112462",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BNWY3M2I0YzItNzA1ZS00MzE3LThlYTEtMTg2YjNiOTYzODQ1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"
 }, {
 "Title": "Batman & Robin",
 "Year": "1997",
 "imdbID": "tt0118688",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_SX300.jpg"
 }, {
 "Title": "Batman: The Animated Series",
 "Year": "1992–1995",
 "imdbID": "tt0103359",
 "Type": "series",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BMTU3MjcwNzY3NF5BMl5BanBnXkFtZTYwNzA2MTI5._V1_SX300.jpg"
 }, {
 "Title": "Batman: Under the Red Hood",
 "Year": "2010",
 "imdbID": "tt1569923",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMwNDEyMjExOF5BMl5BanBnXkFtZTcwMzU4MDU0Mw@@._V1_SX300.jpg"
 }, {
 "Title": "Batman: The Dark Knight Returns, Part 1",
 "Year": "2012",
 "imdbID": "tt2313197",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BMzIxMDkxNDM2M15BMl5BanBnXkFtZTcwMDA5ODY1OQ@@._V1_SX300.jpg"
 }, {
 "Title": "Batman: The Dark Knight Returns, Part 2",
 "Year": "2013",
 "imdbID": "tt2166834",
 "Type": "movie",
 "Poster": "http://ia.media-imdb.com/images/M/MV5BMTQ1Mjk1NTY2NV5BMl5BanBnXkFtZTgwMTA2MDEwNzE@._V1_SX300.jpg"
 }],
 "totalResults": "312",
 "Response": "True"
}
for (var i = 0; i < oData_search.Search.length; i++) {
 var movie = oData_search.Search[i];
 $('#results').append('<div>' + movie.Title + ' - ' + movie.Year + '</div>')
}

#results div {
 background: #ddd;
 padding: 4px;
 margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>

• Alexandru Vlas: thank you for your answer. any ideas how I can create a "div" inside the for loop and wrap each movie inside that div?
• eisbehr: I've added a simple example for creating divs as result. Could be somehow like this. @AlexandruVlas

Answer 2

That's because your loop runs 312 times, but your object only contains a few items. When your loop runs over the actual length of items, oData_search["Search"][i] will be undefined thus the error "undefined is not an object".

Check against the array length instead.

for(var i = 0; i < oData_search.Search.length; i++)

Answer 3

Because oData_search.Search is an array instead of the classical for loop you may use Array.prototype.forEach(). In this way you avoid to get elements not available in the array itself:

A little example:

var str = '{"Search":[\
{"Title":"Batman Begins","Year":"2005","imdbID":"tt0372784","Type":"movie","Poster":"N/A"},\
{"Title":"Batman v Superman: Dawn of Justice","Year":"2016","imdbID":"tt2975590","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"},\
{"Title":"Batman","Year":"1989","imdbID":"tt0096895","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_SX300.jpg"},{"Title":"Batman Returns","Year":"1992","imdbID":"tt0103776","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BODM2OTc0Njg2OF5BMl5BanBnXkFtZTgwMDA4NjQxMTE@._V1_SX300.jpg"},\
{"Title":"Batman Forever","Year":"1995","imdbID":"tt0112462","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BNWY3M2I0YzItNzA1ZS00MzE3LThlYTEtMTg2YjNiOTYzODQ1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"},{"Title":"Batman & Robin","Year":"1997","imdbID":"tt0118688","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_SX300.jpg"},\
{"Title":"Batman: The Animated Series","Year":"1992–1995","imdbID":"tt0103359","Type":"series","Poster":"http://ia.media-imdb.com/images/M/MV5BMTU3MjcwNzY3NF5BMl5BanBnXkFtZTYwNzA2MTI5._V1_SX300.jpg"},\
{"Title":"Batman: Under the Red Hood","Year":"2010","imdbID":"tt1569923","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTMwNDEyMjExOF5BMl5BanBnXkFtZTcwMzU4MDU0Mw@@._V1_SX300.jpg"},\
{"Title":"Batman: The Dark Knight Returns, Part 1","Year":"2012","imdbID":"tt2313197","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMzIxMDkxNDM2M15BMl5BanBnXkFtZTcwMDA5ODY1OQ@@._V1_SX300.jpg"},\
{"Title":"Batman: The Dark Knight Returns, Part 2","Year":"2013","imdbID":"tt2166834","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTQ1Mjk1NTY2NV5BMl5BanBnXkFtZTgwMTA2MDEwNzE@._V1_SX300.jpg"}],\
"totalResults":"312",\
"Response":"True"\
}';
oData_search = $.parseJSON(str);
oData_search.Search.forEach(function(ele, idx) {
 console.log(ele.Title);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

oData_search = {"Search":[
 {"Title":"Batman Begins","Year":"2005","imdbID":"tt0372784","Type":"movie","Poster":"N/A"},
 {"Title":"Batman v Superman: Dawn of Justice","Year":"2016","imdbID":"tt2975590","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"},
 {"Title":"Batman","Year":"1989","imdbID":"tt0096895","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_SX300.jpg"},{"Title":"Batman Returns","Year":"1992","imdbID":"tt0103776","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BODM2OTc0Njg2OF5BMl5BanBnXkFtZTgwMDA4NjQxMTE@._V1_SX300.jpg"},
 {"Title":"Batman Forever","Year":"1995","imdbID":"tt0112462","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BNWY3M2I0YzItNzA1ZS00MzE3LThlYTEtMTg2YjNiOTYzODQ1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"},{"Title":"Batman & Robin","Year":"1997","imdbID":"tt0118688","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_SX300.jpg"},
 {"Title":"Batman: The Animated Series","Year":"1992–1995","imdbID":"tt0103359","Type":"series","Poster":"http://ia.media-imdb.com/images/M/MV5BMTU3MjcwNzY3NF5BMl5BanBnXkFtZTYwNzA2MTI5._V1_SX300.jpg"},
 {"Title":"Batman: Under the Red Hood","Year":"2010","imdbID":"tt1569923","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTMwNDEyMjExOF5BMl5BanBnXkFtZTcwMzU4MDU0Mw@@._V1_SX300.jpg"},
 {"Title":"Batman: The Dark Knight Returns, Part 1","Year":"2012","imdbID":"tt2313197","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMzIxMDkxNDM2M15BMl5BanBnXkFtZTcwMDA5ODY1OQ@@._V1_SX300.jpg"},
 {"Title":"Batman: The Dark Knight Returns, Part 2","Year":"2013","imdbID":"tt2166834","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BMTQ1Mjk1NTY2NV5BMl5BanBnXkFtZTgwMTA2MDEwNzE@._V1_SX300.jpg"}],
 "totalResults":"312",
 "Response":"True"
}
oData_search.Search.forEach(function(value, key){
 console.log(value.Title);
});

forEach()

oData_search.Search.forEach(function(value, key){
 console.log(value.Title);
});

Answer 5

try this :

 for(var i = 0; i < oData_search["Search"].length; i++) {
 var title = oData_search["Search"][i].Title 
 }

value of totalResults is 312 , but elements in oData_search["Search"] are 8 .