json api and result with error: Cannot read property 'length' of undefined

Question

i keep getting something i can't find out how to solve. When i run the code it tells me "Uncaught TypeError: Cannot read property 'length' of undefined". With a lot of search and reading i did not find the answer it mentions that i need to use the length of the value with a for command but i tried several solutions none of them solved the problem, this is the code:

function Cast() {
$.ajax({
    type: "Get",
    url: "http://www.myapifilms.com/imdb/idIMDB?idIMDB=tt2193418&token=<TOKEN>&format=json&callback=?&actors=2",
    dataType: "json",
    success: function (Result)    
    {
        $.each(Result.actors, function (i, item)  {
        $('.div').append('<tr><td>' + Result.actors[i].actorName + '</td></tr>');              

        });
    },
    error: function () {
        console.log("Error, Something went wrong!");
    }
});

}

the response i get from postman:

{
"data": {
"movies": [
  {
    "title": "Hammer of the Gods",
    "simplePlot": "A young man transforms into a brutal warrior as he travels the unforgiving landscape in search of his long lost brother, Hakan the Ferrocious, whose people are relying on him to restore order to their kingdom.",
    "actors": [
      {
        "actorName": "Charlie Bewley",
      },
      {
        "actorName": "Clive Standen",
      etc.

why don't you simply debug your code and introspect the returned data if it is like expected? — wero
– wero, Commented May 10, 2016 at 11:50

ADyson · Accepted Answer · 2020-03-04 14:13:06Z

From what I can see, you are expecting the "actors" array to be a direct property of "data" (i.e. your Result variable). But then the example data you've provided shows that there's a "moveies" array in between the two. Hence the error - internally the .each function will be trying to work out the length of Result.actors...but Result.actors doesn't exist, hence it's saying that it's undefined.

You've got an array of movies, so you need to loop through those first, and then loop through the actors within them.

I've created a worked example here using the data you gave, and the processing code I used. All that's missing is the Ajax bit, I've just put the data directly into a variable instead, but that shouldn't matter.

$(function() {
	var Result = {
		"data": 
		{
			"movies": 
			[
				{
					"title": "Hammer of the Gods",
					"simplePlot": "A young man transforms into a brutal warrior as he travels the unforgiving landscape in search of his long lost brother, Hakan the Ferrocious, whose people are relying on him to restore order to their kingdom.",
					"actors": 
					[
						{
							"actorName": "Charlie Bewley",
						},
						{
							"actorName": "Clive Standen",
						}
					]
				}
			]
		}
	};

	$.each(Result.data.movies, function (i, movie) { 
		$.each(movie.actors, function (j, actor) { 
			$('.div').append('<tr><td>' + actor.actorName + '</td></tr>'); 
		}); 
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<table class="div">
	</table>

Collectives™ on Stack Overflow

json api and result with error: Cannot read property 'length' of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related