javascript - JSON 和 jQuery 搜索

Question

当我使用以下代码时，我不断收到以下错误。任何帮助表示赞赏。我已经坚持了很长一段时间。

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

这是整个 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

您的 JSON 数组有一个元素没有 name 和 description 属性。它是 id "dae04696-2acb-4972-a471-1b873e2a8d4f" 索引为 322 的元素:

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

因此您的代码将在以下语句中引发错误，因为您尝试在未定义的 name 属性上使用 String 方法(搜索):

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(tipuedrop_in.pages[i].name))也会消除错误条件，因为当 name 属性不存在。

然而，这有一个副作用:

当您通过“undefined”的子字符串进行搜索时，例如“fine”，您将获得与此未定义名称的匹配项，这可能不是您想要的行为。