Cannot read property 'length' of undefined in JavaScript

Question

I'm trying to do a XMLHttpRequest where I enter a text and when I do enter a right movie, it gives me the title. For example, if I enter "Batman" it should give me all movies with Batmans. Anyways I don't think its kinda important.

I'm getting a error where it says "Cannot read property 'length' of undefined". This happened whenever I enter a movie that isn't in the omdbapi. I do have a "code" where it says if the result is null, it should say "There isn't any movie like this", but looks like it skips this for some strange reason.

 omdbAPI.addEventListener("load", function () {
            var result = JSON.parse(this.responseText);
            if (result === null) {
                alert("Your search did not find the movie!");
            } else {
                var counter;
                for (counter = 0; counter < result.Search.length; counter++) {
                    var text = document.createTextNode(result.Search[counter].Title);
                    var newMovie = document.createElement("p");
                    newMovie.appendChild(text);
                    newMovie.className = "searchResult";
                    movieList.appendChild(newMovie);
                }
            }
        });

It gives me an error on for (counter = 0; counter < result.Search.length; counter++) and I can't really figure out why it acts like this when it should go as it should. Does anyone see the problem?

result = var movieList = document.querySelector("#result");

So as I said, it feels like it passes away from "alert" section and just pass it to Else which give me a error, if I am right.

EDIT PART 2: Fixed it by doing if (result.Search == undefined) {

Answer 1

I think the problem is here result.Search

Sometimes that return null, so you can try something like this to be sure, every time when you try to access result.Search you have a valid value:

omdbAPI.addEventListener("load", function () {
        var result = JSON.parse(this.responseText);
        if (result.Search === null) {
            alert("Your search did not find the movie!");
        } else {
            var counter;
            for (counter = 0; counter < result.Search.length; counter++) {
                var text = document.createTextNode(result.Search[counter].Title);
                var newMovie = document.createElement("p");
                newMovie.appendChild(text);
                newMovie.className = "searchResult";
                movieList.appendChild(newMovie);
            }
        }
    });

or you can check the result.Search before to access it in for:

omdbAPI.addEventListener("load", function () {
        var result = JSON.parse(this.responseText);
        if (result === null) {
            alert("Your search did not find the movie!");
        } else {
            var counter;
            var validSearch = result.Search;
            if(validSearch != null){
             for (counter = 0; counter < validSearch.length; counter++) {
                 var text = document.createTextNode(result.Search[counter].Title);
                 var newMovie = document.createElement("p");
                 newMovie.appendChild(text);
                 newMovie.className = "searchResult";
                 movieList.appendChild(newMovie);
             }
            }
        }
    });