如何搜索这个 JS 对象？答案

【问题标题】：How can I search through this JS object?如何搜索这个 JS 对象？
【发布时间】：2017-10-20 01:58:13
【问题描述】：

所以我有这个 JS 对象：

data = [
{   
    "id": "145",
    "width": "12",
    "length": "20",
    "dealerPrice": "2.46",
    "retailPrice": "3.90"
},
{
    "id": "146",
    "width": "14",
    "length": "22",
    "dealerPrice": "2.46",
    "retailPrice": "3.90"
},
{
    "id": "147",
    "width": "19",
    "length": "25",
    "dealerPrice": "3.32",
    "retailPrice":"5.50"
},
    ...
];

我的问题是，我该如何搜索这个？我找到了一个搜索算法并尝试将其调整为我的对象，但是它只有在我将属性值更改为字符时才有效。因此，如果我将"id": "145" 更改为"id": "foo" 等等，它就可以工作。为什么是这样？有一个更好的方法吗？任何帮助将不胜感激。

有问题的搜索算法：

$("#search-form").submit(function(e) {
e.preventDefault();

var query = $("#search-form input").val();

$(".product").hide();
$(".product").each(function() {
    var id = $(this).data("id"),
        width = $(this).data("width"),
        length = $(this).data("length");

    if (id.indexOf(query) > -1 || width.indexOf(query) > -1 || length.indexOf(query) > -1) {
        $(this).show();
    }
});
});

完整项目：https://jsfiddle.net/8toz9xup/

【问题讨论】：

您的 JsFiddle 在控制台中有错误。我建议您查看并修复它，除非这是您的问题的原因？
您展示的提交功能与您的data 对象有何关系？它搜索 HTML 元素属性值，而不是 JS 对象的属性。如果您尝试使用该版本的改编版本，请edit 您的问题以显示您实际使用的内容。 “仅当我将属性值更改为字符时才有效” - 在显示的data 对象中，所有属性值已经是字符串。
@nnnnnn "在显示的数据对象中，所有的属性值都已经是字符串" 不是var id = $(this).data("id")，jQuery 将值转换为数字
@NewToJS 这个错误正是问题所在。调用 $(this).data('id") 和其他数据属性返回整数，而不是字符串，因此错误“indexOf 不是函数”是合适的，因为您无法在整数变量类型上执行该函数.
@guest271314 - 但是显示的函数没有访问data 对象：正如我已经说过的，它正在访问 HTML 元素属性。问题标题明确要求搜索 JS 对象，而不是搜索具有相似属性的 HTML 元素。

标签： javascript jquery html css search

【解决方案1】：

Question 中的代码尝试获取 jQuery $.fn.data() 返回的数字的 .indexOf()。您可以使用HTMLElement.dataset 获取data-* 属性的DOMString 值，然后.indexOf() 应匹配"foo" 属性设置"id"

$("#search-form").submit(function(e) {
  e.preventDefault();
  var query = $("#search-form input").val();

  $(".product").hide();
  $(".product").each(function() {
    var id = this.dataset.id,
      width = this.dataset.width,
      length = this.dataset.length;

    if (id.indexOf(query) > -1 
      || width.indexOf(query) > -1 
      || length.indexOf(query) > -1) {
      $(this).show();
    }
  });
});

jsfiddle https://jsfiddle.net/8toz9xup/1/

【讨论】：

【解决方案2】：

您试图比较数字和字符串。我刚刚将“.toString()”添加到您从 HTML 元素中检索“数据”属性的调用末尾，它现在正在工作。

data = [{
  "id": "145",
  "width": "12",
  "length": "20",
  "dealerPrice": "2.46",
  "retailPrice": "3.90"
}, {
  "id": "146",
  "width": "14",
  "length": "22",
  "dealerPrice": "2.46",
  "retailPrice": "3.90"
}, {
  "id": "147",
  "width": "19",
  "length": "25",
  "dealerPrice": "3.32",
  "retailPrice": "5.50"
}, {
  "id": "148",
  "width": "34",
  "length": "38",
  "dealerPrice": "5.50",
  "retailPrice": "7.90"
}, {
  "id": "149",
  "width": "24",
  "length": "28",
  "dealerPrice": "5.15",
  "retailPrice": "7.59"
}, {
  "id": "150",
  "width": "22",
  "length": "34",
  "dealerPrice": "3.60",
  "retailPrice": "5.50"
}, {
  "id": "151",
  "width": "28",
  "length": "34",
  "dealerPrice": "3.58",
  "retailPrice": "5.50"
}];

var products = "";

for (var i = 0; i < data.length; i++) {
  var id = data[i].id,
    width = data[i].width,
    length = data[i].length,
    dealerPrice = data[i].dealerPrice,
    retailPrice = data[i].retailPrice;

  //create product cards
  products += "<div class='col-sm-4 product' data-id='" + id + "' data-width='" + width + "' data-length='" + length + "' data-dealerPrice='" + dealerPrice + "' data-retailPrice='" + retailPrice + "'><div class='product-inner text-center'>ID: " + id + "<br />Width: " + width + "<br />Length: " + length + "<br />Dealer Price: " + dealerPrice + "<br />Retail Price: " + retailPrice + "</div></div>";

}

$("#products").html(products);

//on search form submit
$("#search-form").submit(function(e) {
  e.preventDefault();
  var query = $("#search-form input").val();

  $(".product").hide();
  $(".product").each(function() {
    var id = $(this).data("id").toString();
    width = $(this).data("width").toString(),
      length = $(this).data("length").toString();

    if (id.indexOf(query) > -1 || width.indexOf(query) > -1 || length.indexOf(query) > -1) {
      $(this).show();
    }
  });
});

body {
  padding-top: 30px;
}

.product {
  margin-bottom: 30px;
}

.product-inner {
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  padding: 10px;
}

.product img {
  margin-bottom: 10px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="search">
    <form id="search-form" action="" method="POST" enctype="multipart/form-data">
      <div class="form-group col-xs-9">
        <input class="form-control" type="text" placeholder="Search" />
      </div>
      <div class="form-group col-xs-3">
        <button type="submit" class="btn btn-block btn-primary">Search</button>
      </div>
    </form>
  </div>
  <div class="row" id="products">
  </div>
</div>

【讨论】：