JavaScript 使用 HTML 表单过滤 JSON 对象答案

【问题标题】：JavaScript filter JSON objects using HTML formsJavaScript 使用 HTML 表单过滤 JSON 对象
【发布时间】：2015-11-01 07:10:13
【问题描述】：

我希望在单击 HTML 复选框时过滤 JSON 数组中的对象列表。我知道 JavaScript array.sort() 方法，但是如何根据复选框单击消除项目？我需要事件监听器吗？

我的 JSON 看起来是这样的：

{ "lots" : [
    {
    "name" : "Parking Lot Name",
    "price" : 2,
    "cash" : true,
    "credit" : false,
    "address" : "1234 W Main Ave",
    "center" : {
        "lat" : 67.659414,
        "lng" : -137.414730
    }... etc.

如果我有一个包含用于根据付款类型取消停车场的复选框的表单，我应该如何实施呢？我读过一个 jQuery array.grep() 函数，是吗？

我的页面正在使用这样的 JS 循环构建：

makeList(){
var self = this;

self.jsonFile = $.ajax({
 type: 'GET',
 url: 'assets/data/default.json',
 dataType: 'json',
 success: function(response) {
   console.log(response);
 }
});

self.jsonFile.done(function(data){
  //Sort low to high by default
  data.lots.sort(function(a, b){
    return(a.price > b.price)
  });

  for (var i = 0; i < data.lots.length; i++) {
    document.getElementById('jsonList').innerHTML +=
      '<li>
        <div id="text">
          <p class="price"> 
            $' + data.lots[i].price +  '.00
          </p>
          <p class="info">' +
            data.lots[i].address +
         '</p>
        </div>
        <form method="get">
          <button type="submit" formaction="https://www.google.com/maps/dir/Current+Location/' +
           data.lots[i].address +
           '">Directions
          </button>
          <button type="submit" formaction="detail-view.html">Details
          </button>
        </form>
      </li>';
  }
});

}

【问题讨论】：

1. JSON 是一种通过字符串序列化对象的方法。你没有 JSON，你有一个对象。 2. 你的问题是什么？您的输入是什么，您需要什么输出，以及触发处理的原因是什么？
您的代码中似乎有很多语法错误。字符串不能像 OP 中那样在多行中断开。您是否尝试从 lots 数组中获取“现金”或“信用”为真的对象？在我看来 reduce 或 filter 可以完成这项工作。

标签： javascript html json forms filter

【解决方案1】：

您可以使用以下方式获取付款类型为“现金”的批次：

var cashLots = data.lots.filter(function(lot){return lot.cash});

作为箭头函数：

var cashLots = data.lots.filter(lot => lot.cash);

【讨论】：

【解决方案2】：

你可以这样消除：您必须将 onchange 函数绑定到复选框，然后对该函数使用以下方式

  data = [{
      "name": "name",
      "location1": "no",
      "description": "description of services"
      },
     {
      "name": "name2",
      "location1": "yes",

      "description": "description of services2"
       },
       {
        "name": "name3",
         "location1": "no",

        "description": "description of services3"
    }
  ];

   b = $.grep(data, function(el, i) {
     return el.location1.toLowerCase() === "yes" 
   });

【讨论】：