Uncaught TypeError: Cannot read property 'toLowerCase' of undefined Error on text field

Question

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

at Object.<anonymous> (<anonymous>:16:76)
at Function.each (jquery.js?v=1.4.4:34)
at Object.success (<anonymous>:10:13)
at Function.handleSuccess (jquery.js?v=1.4.4:143)
at XMLHttpRequest.w.onreadystatechange (jquery.js?v=1.4.4:142)

I keep getting the above error when trying to use the toLowerCase() function on the description in the commented out if code for the following code:

(function($) {
    $.ajax({
      url: "/node.json",
      data: {'type': "resource_page", 'page': 3},
      dataType: "json",
      type: "GET",
      success: function (response) {

          $.each(response.list, function(k, resource) {

            var title = resource.title;
            var description = resource.body.value;

              if(title.toLowerCase().indexOf("biology") >= 0) { console.log(description.toLowerCase().indexOf("biology")); };
              //if(title.toLowerCase().indexOf("biology") >= 0 || description.toLowerCase().indexOf("biology") >=0) { console.log(title); };   

          });
      }
    });
}(jQuery));

When I consol.log() it everything works fine (I get the result of 226 saying that "biology" does show up in the string). I can even put:

if(title.toLowerCase().indexOf("biology") >= 0) { console.log(description.toLowerCase()); };

and still get the correct console.log of <p>this video database is designed to teach laboratory fundamentals through simple, easy to understand video demonstrations. this collection demonstrates how to execute basic techniques commonly used in cellular and molecular biology. to enhance your understanding of the methods each video is paired with additional video resources to show practical applications of the techniques and other complementary skills.</p>

I am not sure why I get the error for description and not for the title. I have tried using toLowerCase() on the description before using it in the if but that did not work. I can only use it when console.logging it. Can anyone help me please. Thank you very very much!

Amir H. Bagheri Amir H. Bagheri · Accepted Answer · 2017-03-29T14:29:29

The reason that you'are getting the error is when you have either "title" or description equal undefined. The following example throws the very same exception error:

var title;
var description = '<p>this video database is designed to teach laboratory fundamentals through simple, easy to understand video demonstrations. this collection demonstrates how to execute basic techniques commonly used in cellular and molecular biology. to enhance your understanding of the methods each video is paired with additional video resources to show practical applications of the techniques and other complementary skills.</p>';

console.log(description.toLowerCase().indexOf("biology"))
if(title.toLowerCase().indexOf("biology") >= 0 || description.toLowerCase().indexOf("biology") >=0) { 

console.log(title); 

};

However, I would recommend you to check whether they are not null or undefined at your if statement like following:

var title;
var description = '<p>this video database is designed to teach laboratory fundamentals through simple, easy to understand video demonstrations. this collection demonstrates how to execute basic techniques commonly used in cellular and molecular biology. to enhance your understanding of the methods each video is paired with additional video resources to show practical applications of the techniques and other complementary skills.</p>';

console.log(description.toLowerCase().indexOf("biology"))
if((title && title.toLowerCase().indexOf("biology") >= 0) || (description && description.toLowerCase().indexOf("biology") >=0)) { 

console.log(title); 
console.log('It works fine');
};

You see that it works fine.

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined Error on text field

1 Answers