JSON and jQuery Search

JSON and jQuery Search

本文关键字:Search jQuery and JSON      更新时间:2023-09-26

当我使用以下代码时,我不断收到以下错误。感谢您的帮助。我在这个问题上已经坚持了很长一段时间。

tipuedrop.js:60未捕获类型错误:无法读取未定义的属性"search"

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

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

{
    "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(使用String(tipuedrop_in.pages[i].name))也将删除错误条件,因为当name属性不存在时,它将呈现"undefined"(字符串)。

然而,这有一个副作用:

当你用"undefined"(如"fine")的子字符串搜索时,你会得到一个与这个未定义名称匹配的名称,这可能不是你想要的行为。

创建一些具有名称和描述的变量,然后对其进行搜索

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