Фильтровать JSON-файл при загрузке?

1

У меня есть данные 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>

Если кто-нибудь знает, как исправить эту проблему, пожалуйста, дайте мне знать. Спасибо.

  • 1
    это означало бы, что obj.contacts не является массивом - и, глядя на ответ, это не массив
Теги:
filter

1 ответ

3
Лучший ответ

contacts - это объект, а не массив:

contacts:{1: {id: 1, first: "Mike", last: "Johnson", email: "[email protected]", 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};
Поделиться
  • 0
    Спасибо за этот ответ. Еще один вопрос, как вы можете видеть, я использую объект JS для хранения данных JSON после их загрузки. Проблема в том, что установит данные в массив. После того, как запись была обновлена, добавлена или удалена, я должен загрузить эти данные обратно в файл JSON в том же формате. Есть ли хороший способ добиться этого?
  • 0
    Вам нужно загрузить данные или просто изменить / получить переменную с желаемым содержимым, к которому у вашего скрипта есть доступ? Это две совершенно разные концепции. Если вы хотите загрузить данные, вы можете использовать fetch
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню