使用 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 = [&nbsp; { item: "Saab", sku: "SA" },&nbsp; { item: "Volvo", sku: "VO" },&nbsp; { item: "BMW", sku: "BM" },&nbsp; { item: "Toyota", sku: "TO" },&nbsp; { item: "Honda", sku: "HO" },&nbsp; { item: "Nissan", sku: "NI" },];$("#filter").keyup(function() {&nbsp; var filter = $(this).val();&nbsp; items.forEach(function(item, index) {&nbsp; &nbsp; var value = item.item // Honda, Nissan&nbsp; &nbsp; var sku = item.sku // HO, NI&nbsp; &nbsp; if (filter !== '' && new RegExp(filter, "i").test(value)) {&nbsp; &nbsp; &nbsp; // Do somethign when matched&nbsp; &nbsp; &nbsp; console.info(index, value, sku)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // console.log(index);&nbsp; &nbsp; &nbsp; // console.log(value);&nbsp; &nbsp; }&nbsp; });});<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">&nbsp; <fieldset>&nbsp; &nbsp; <input type="text" class="text-input" id="filter" value="" />&nbsp; &nbsp; <span id="filter-count"></span>&nbsp; </fieldset></form>

Answer 2

你不能像这样使用jquery，把它改成mapitems.map(function (value, index) {&nbsp; &nbsp; &nbsp; &nbsp; if (value.item.indexOf(filter) < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Do somethign&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(value);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });var items =[&nbsp; {item:"Saab", sku:"SA"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item:"Volvo", sku:"VO"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item:"BMW", sku:"BM"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item:"Toyota", sku:"TO"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item:"Honda", sku:"HO"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item:"Nissan", sku:"NI"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$("#filter").keyup(function () {&nbsp; &nbsp; var filter = $(this).val();&nbsp; &nbsp; console.log(filter);&nbsp; &nbsp; items.map(function (value, index) {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if (value.item.indexOf(filter) < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Do somethign&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(value.item + "-" + value.sku);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});<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">&nbsp; <fieldset>&nbsp; &nbsp; <input type="text" class="text-input" id="filter" value="" />&nbsp; &nbsp; <span id="filter-count"></span>&nbsp; </fieldset></form>

Answer 3

好吧，问题包括对数组属性的错误访问：items['item']解析为undefined实际上，该属性属于数组中包含的对象，而不是数组本身。itemitems您必须循环访问集合（带或不带jQuery），并在访问后在每个项目上使用该属性：$("#filter").keyup(function () {&nbsp; &nbsp; var filter = $(this).val();&nbsp; &nbsp; $(items).each(function (index, value) {&nbsp; &nbsp; &nbsp; console.log('value:',value)&nbsp; &nbsp; &nbsp; &nbsp; if (value.item.search(new RegExp(filter, "i")) < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //do something&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(value);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});&nbsp; &nbsp;如果您不想使用 jQuery 循环访问集合：$("#filter").keyup(function () {&nbsp; &nbsp; var filter = $(this).val();&nbsp; &nbsp; if(items.find(item => item.item === filter)) {&nbsp; &nbsp; &nbsp; console.log('found');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; console.log('not found')&nbsp; &nbsp; }});&nbsp; &nbsp;

Answer 4

这里的问题是由于使用jQuery选择器选择数组项引起的，数组项不适用于数组或对象，它仅适用于DOM元素选择，以下是如何使用jQuery执行此操作：var items = [&nbsp; { item: "Saab", sku: "SA" },&nbsp; { item: "Volvo", sku: "VO" },&nbsp; { item: "BMW", sku: "BM" },&nbsp; { item: "Toyota", sku: "TO" },&nbsp; { item: "Honda", sku: "HO" },&nbsp; { item: "Nissan", sku: "NI" },];$("#filter").keyup(function () {&nbsp; var filter = $(this).val();&nbsp; $.each(items, function (index, value) {&nbsp; &nbsp; $.each(Object.keys(value), function (idx, val) {&nbsp; &nbsp; &nbsp; if (val.search(new RegExp(filter, "i")) < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Do somethign&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp;console.log(index, idx);&nbsp; &nbsp; &nbsp; &nbsp;console.log(value, val);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});<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">&nbsp; <fieldset>&nbsp; &nbsp; <input type="text" class="text-input" id="filter" value="" />&nbsp; &nbsp; <span id="filter-count"></span>&nbsp; </fieldset></form>