JSON and jQuery search

Question

I keep getting the following error when I use the following code. Any help is appreciated. I lingered on this for quite some time.

tipuedrop.js: 60 Uncaught TypeError: Unable to read search property undefined

function getTipuedrop($obj) {
    if ($obj.val()) {
        var c = 0;
        for (var i = 0; i < tipuedrop_in.pages.length; i++) {
            var pat = new RegExp($obj.val(), 'i');
            if ((tipuedrop_in.pages[i].name.search(pat) != -1 || tipuedrop_in.pages[i].description.search(pat) != -1) && c < set.show) {
                if (c == 0) {
                    var out = '<div class="tipue_drop_box"><div id="tipue_drop_wrapper">';
                }
                out += '<a href="' + tipuedrop_in.pages[i].name + '"';
                if (set.newWindow) {
                    out += ' target="_blank"';
                }
                out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].name + '" class="tipue_drop_image"></div><div class="tipue_drop_right">' + tipuedrop_in.pages[i].name + '</div></div></a>';
                c++;
            }
        }
        if (c != 0) {
            out += '</div></div>';
            $('#tipue_drop_content').html(out);
            $('#tipue_drop_content').fadeIn(set.speed);
        }
    } else {
        $('#tipue_drop_content').fadeOut(set.speed);
    }
}

Here's the whole Javascript:

(function($) {

 $.fn.tipuedrop = function(options) {

      var set = $.extend( {

           'show'                   : 3,
           'speed'                  : 300,
           'newWindow'              : false,
           'mode'                   : 'static',
           'contentLocation'        : 'tipuedrop/tipuedrop_content.json'

      }, options);

      return this.each(function() {

           var tipuedrop_in = {
                pages: []
           };
           $.ajaxSetup({
                async: false
           });

           if (set.mode == 'json')
           {
                $.getJSON(set.contentLocation)
                     .done(function(json)
                     {
                          tipuedrop_in = $.extend({}, json);
                     });
           }               

           if (set.mode == 'static')
           {
                tipuedrop_in = $.extend({}, tipuedrop);
           }

           $(this).keyup(function(event)
           {
                getTipuedrop($(this));
           });               

           function getTipuedrop($obj)
           {
                if ($obj.val())
                {
                     var c = 0;
                     for (var i = 0; i < tipuedrop_in.pages.length; i++)
                     {
                          var pat = new RegExp($obj.val(), 'i');
                          if ((tipuedrop_in.pages[i].name.search(pat) != -1 || tipuedrop_in.pages[i].description.search(pat) != -1) && c < set.show)
                          {
                               if (c == 0)
                               {
                                    var out = '<div class="tipue_drop_box"><div id="tipue_drop_wrapper">';    
                               }
                               out += '<a href="' + tipuedrop_in.pages[i].name + '"';
                               if (set.newWindow)
                               {
                                    out += ' target="_blank"';
                               }
                               out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].master_image + '" class="tipue_drop_image"></div><div class="tipue_drop_right">' + tipuedrop_in.pages[i].name + '</div></div></a>';
                               c++;

                               console.log(tipuedrop_in.pages[i].name);
                               console.log(tipuedrop_in.pages[i].description);
                          }
                     }
                     if (c != 0)
                     {
                          out += '</div></div>';               
                          $('#tipue_drop_content').html(out);
                          $('#tipue_drop_content').fadeIn(set.speed);
                     }
                }
                else
                {
                     $('#tipue_drop_content').fadeOut(set.speed);
                }
           }

           $('html').click(function()
           {
                $('#tipue_drop_content').fadeOut(set.speed);
           });

      });
 };

})(jQuery);           

Answer 1

Your JSON array has an element with no nameand attributes description. This is the element with id "dae04696-2acb-4972-a471-1b873e2a8d4f"at index 322:

{
    "fees":[],"variations":[],
    "available_for_pickup":true,
    "available_online":false,
    "visibility":"PUBLIC",
    "id":"dae04696-2acb-4972-a471-1b873e2a8d4f",
    "type":"NORMAL"
}

Thus, your code will throw an error in the following statement because you are trying to use the String (search) method in the undefined attribute name:

if ((tipuedrop_in.pages[i].name.search(pat) != -1 || ....

, if , , , description.

if ((tipuedrop_in.pages[i].name 
             && tipuedrop_in.pages[i].name.search(pat) != -1 
       || tipuedrop_in.pages[i].description 
             && tipuedrop_in.pages[i].description.search(pat) != -1) 
   && c < set.show) {
       ...

, String ( String(tipuedrop_in.pages[i].name)) , "undefined" (), name .

:

"undefined", "fine", undefined, , , , .

Answer 2

,

function getTipuedrop($obj) {
    if ($obj.val()) {
        var c = 0;
        for (var i = 0; i < tipuedrop_in.pages.length; i++) {
            var pat = new RegExp($obj.val(), 'i');
            var nm = String(tipuedrop_in.pages[i].name);
            var desc = String(tipuedrop_in.pages[i].description);
            if ((nm.search(pat) != -1 || desc.search(pat) != -1) && c < set.show) {
                if (c == 0) {
                    var out = '<div class="tipue_drop_box"><div id="tipue_drop_wrapper">';
                }
                out += '<a href="' + tipuedrop_in.pages[i].name + '"';
                if (set.newWindow) {
                    out += ' target="_blank"';
                }
                out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].name + '" class="tipue_drop_image"></div><div class="tipue_drop_right">' + tipuedrop_in.pages[i].name + '</div></div></a>';
                c++;
            }
        }
        if (c != 0) {
            out += '</div></div>';
            $('#tipue_drop_content').html(out);
            $('#tipue_drop_content').fadeIn(set.speed);
        }
    } else {
        $('#tipue_drop_content').fadeOut(set.speed);
    }
}