使用 each（） 在对象数组中循环

Question

我正在处理下面的代码。我正在尝试筛选并获取包含类似输入字符串的项目项的索引和值，但它不起作用。var items =[  {item:"Saab", sku:"SA"},              {item:"Volvo", sku:"VO"},              {item:"BMW", sku:"BM"},              {item:"Toyota", sku:"TO"},              {item:"Honda", sku:"HO"},              {item:"Nissan", sku:"NI"},            ];            $("#filter").keyup(function () {    var filter = $(this).val();    $(items['item']).each(function (index, value) {        if (value.search(new RegExp(filter, "i")) < 0) {          // Do somethign        } else {           console.log(index);           console.log(value);        }    });});            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="live-search" action="" class="styled" method="post">  <fieldset>    <input type="text" class="text-input" id="filter" value="" />    <span id="filter-count"></span>  </fieldset></form>

Answer 1

您可能必须将项目作为常规 javascript 变量引入，但不能作为 jquery 选择器。

var items = [

  { item: "Saab", sku: "SA" },

  { item: "Volvo", sku: "VO" },

  { item: "BMW", sku: "BM" },

  { item: "Toyota", sku: "TO" },

  { item: "Honda", sku: "HO" },

  { item: "Nissan", sku: "NI" },

];

$("#filter").keyup(function() {

  var filter = $(this).val();

  items.forEach(function(item, index) {

    var value = item.item // Honda, Nissan

    var sku = item.sku // HO, NI

    if (filter !== '' && new RegExp(filter, "i").test(value)) {

      // Do somethign when matched

      console.info(index, value, sku)

    } else {

      // console.log(index);

      // console.log(value);

    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="live-search" action="" class="styled" method="post">

  <fieldset>

    <input type="text" class="text-input" id="filter" value="" />

    <span id="filter-count"></span>

  </fieldset>

</form>

Answer 2

你不能像这样使用jquery，把它改成map

items.map(function (value, index) {

        if (value.item.indexOf(filter) < 0) {

          // Do somethign

        } else {

           console.log(index);

           console.log(value);

        }

    });

var items =[  {item:"Saab", sku:"SA"},

              {item:"Volvo", sku:"VO"},

              {item:"BMW", sku:"BM"},

              {item:"Toyota", sku:"TO"},

              {item:"Honda", sku:"HO"},

              {item:"Nissan", sku:"NI"},

            ];

            

$("#filter").keyup(function () {

    var filter = $(this).val();

    console.log(filter);

    items.map(function (value, index) {

        

        if (value.item.indexOf(filter) < 0) {

          // Do somethign

        } else {

           console.log(index);

           console.log(value.item + "-" + value.sku);

        }

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="live-search" action="" class="styled" method="post">

  <fieldset>

    <input type="text" class="text-input" id="filter" value="" />

    <span id="filter-count"></span>

  </fieldset>

</form>

Answer 3

好吧，问题包括对数组属性的错误访问：

items['item']解析为undefined

实际上，该属性属于数组中包含的对象，而不是数组本身。itemitems

您必须循环访问集合（带或不带jQuery），并在访问后在每个项目上使用该属性：

$("#filter").keyup(function () {

    var filter = $(this).val();

    $(items).each(function (index, value) {

      console.log('value:',value)

        if (value.item.search(new RegExp(filter, "i")) < 0) {

          //do something

        } else {

           console.log(index);

           console.log(value);

        }

    });

});   

如果您不想使用 jQuery 循环访问集合：

$("#filter").keyup(function () {

    var filter = $(this).val();

    if(items.find(item => item.item === filter)) {

      console.log('found');

    } else {

      console.log('not found')

    }

});   

Answer 4

这里的问题是由于使用jQuery选择器选择数组项引起的，数组项不适用于数组或对象，它仅适用于DOM元素选择，以下是如何使用jQuery执行此操作：

var items = [

  { item: "Saab", sku: "SA" },

  { item: "Volvo", sku: "VO" },

  { item: "BMW", sku: "BM" },

  { item: "Toyota", sku: "TO" },

  { item: "Honda", sku: "HO" },

  { item: "Nissan", sku: "NI" },

];

$("#filter").keyup(function () {

  var filter = $(this).val();

  $.each(items, function (index, value) {

    $.each(Object.keys(value), function (idx, val) {

      if (val.search(new RegExp(filter, "i")) < 0) {

          // Do somethign

      } else {

       console.log(index, idx);

       console.log(value, val);

      }

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="live-search" action="" class="styled" method="post">

  <fieldset>

    <input type="text" class="text-input" id="filter" value="" />

    <span id="filter-count"></span>

  </fieldset>

</form>