在加载时过滤 JSON 文件？

Question

我有想要根据用户选择过滤的 json 数据。出于某种原因，我在调试器控制台中收到一条错误消息：TypeError: obj.contacts.filter is not a function。这是我的代码示例：

var contactStorage = {};
$("#frm_find").on("submit", findContacts);

function findContacts(e) {
  e.preventDefault();
  var frmFilter = $("#frm_filterby").val();

  if (frmFilter) {
    $.ajax({
      type: "GET",
      url: "https://api.myjson.com/bins/9j7qg?" + new Date().getTime(),
      dataType: "json"
    }).done(function(obj) {
      contactStorage = obj.contacts.filter(function(entry) {
        switch (frmFilter) {
          case '1':
            return entry.status === 1;
            break;
          case '2':
            return entry.status === 0;
            break;
          default:
            return entry;
        }
      });
      console.log(contactStorage);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert('Error: ' + errorThrown);
    });
  }
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frm_find" id="frm_find" autocomplete="off">
  <div class="row find-row">
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <select class="form-control" name="frm_filterby" id="frm_filterby" required>
        <option value="">--Choose--</option>
        <option value="1">Active</option>
        <option value="2">Inactive</option>
        <option value="3">Show All</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <button class="btn btn-block btn-primary" name="frm_search" id="frm_search">
                                        <span class="glyphicon glyphicon-search"></span> Search
                                    </button>
    </div>
  </div>
</form>

如果有人知道如何解决此问题，请告诉我。谢谢。

Answer 1

contacts 是一个对象，而不是一个数组：

contacts:{1: {id: 1, first: "Mike", last: "Johnson", email: "mjohnson@gmail.com", phone: "(203) 567-9055",…},…}

要使用filter，首先将其转换为数组，可能通过Object.values：

var contactStorage = {};
$("#frm_find").on("submit", findContacts);

function findContacts(e) {
  e.preventDefault();
  var frmFilter = $("#frm_filterby").val();

  if (frmFilter) {
    $.ajax({
      type: "GET",
      url: "https://api.myjson.com/bins/9j7qg?" + new Date().getTime(),
      dataType: "json"
    }).done(function(obj) {
      contactStorage = Object.values(obj.contacts).filter(function(entry) {
        switch (frmFilter) {
          case '1':
            return entry.status === 1;
            break;
          case '2':
            return entry.status === 0;
            break;
          default:
            return entry;
        }
      });
      console.log(contactStorage);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert('Error: ' + errorThrown);
    });
  }
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frm_find" id="frm_find" autocomplete="off">
  <div class="row find-row">
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <select class="form-control" name="frm_filterby" id="frm_filterby" required>
        <option value="">--Choose--</option>
        <option value="1">Active</option>
        <option value="2">Inactive</option>
        <option value="3">Show All</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <button class="btn btn-block btn-primary" name="frm_search" id="frm_search">
                                        <span class="glyphicon glyphicon-search"></span> Search
                                    </button>
    </div>
  </div>
</form>

如果你想将过滤后的数组转换回某种对象，你可以传播它：

contactStorage = { ...contactStorage};