JSON and jQuery Search

Question

I keep on getting the following error when I use the following code. Any help is appreciated. I have been stuck on this for quite awhile.

tipuedrop.js:60 Uncaught TypeError: Cannot read property 'search' of 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);

what's the search(pat) in tipuedrop_in.pages[i].name.search(pat)? — madalinivascu
– madalinivascu, Commented May 12, 2016 at 4:40
and this var pat = new RegExp($obj.val(), 'i'); what does it do? — madalinivascu
– madalinivascu, Commented May 12, 2016 at 4:41
The error should be throwing either with tipuedrop_in.pages[i].name.search(pat) or with tipuedrop_in.pages[i].description.search(pat). Just console.log(tipuedrop_in.pages[i].name) and console.log(tipuedrop_in.pages[i].description) and see what you are getting.. — Guruprasad J Rao
– Guruprasad J Rao, Commented May 12, 2016 at 4:41
Is there any key by name ,"name" & "description" inside tipuedrop_in.pages — brk
– brk, Commented May 12, 2016 at 4:43

trincot · Accepted Answer · 2016-05-12 07:05:09Z

2

Your JSON array has an element without the name and description attributes. It is 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"
}

So your code will raise an error in the following statement because you try to use a String method (search) on the undefined name attribute:

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

So prefix in that if an additional condition to make sure the attribute exists, and do the same with 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) {
       ...

Note that converting to String explicitly (with String(tipuedrop_in.pages[i].name)) will also remove the error condition, because it will render "undefined" (string) when the name property does not exist.

However, this has a side-effect:

When you search by a sub-string of "undefined", like "fine", you will get a match with this undefined name, which probably is not what you want as behaviour.

edited May 12, 2016 at 7:05

answered May 12, 2016 at 5:18

trincot

357k38 gold badges282 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Barbaro Over a year ago

Got it. Thank you so much!

madalinivascu · Accepted Answer · 2016-05-12 05:04:38Z

2

Create some variables with the name and description then apply the search on them

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);
    }
}

edited May 12, 2016 at 5:04

answered May 12, 2016 at 4:57

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

5 Comments

Mike Barbaro Over a year ago

Uncaught TypeError: Cannot read property 'search' of undefined

madalinivascu Over a year ago

why are you using RegExp,what are you testing with it?

madalinivascu Over a year ago

@MikeBarbaro i don't see any RegExp used there

Mike Barbaro Over a year ago

It is in the JS file when downloaded

Mike Barbaro Over a year ago

Got it. Thank you so much!

Collectives™ on Stack Overflow

JSON and jQuery Search

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related