фильтровать и добавлять результаты AJAX JSON на основе объектов с определенным значением ключа

Question

Я пытаюсь отобразить 3 записи, которые имеют значение "sort": "list:"

Я пробовал два метода ниже, используя оператор if для фильтрации результатов (закомментировано ниже), чтобы отобразить 3 записи, но оба метода не отображали результаты на экране? С закомментированными строками, как показано ниже, страница корректно отображает все 5 результатов. Любой совет ценится СПАСИБО!

$.ajax({
type: 'GET',
url: '/stores',
success: function(stores) {
  // if (stores.sort === 'list') {
  $.each(stores, function(i, store) {
    // if (stores.sort === 'list'){
      $stores.append(`<div><img src="${store.name}.jpg"></div>`);
    //  }
     });
  //}
   }
 });

Мой JSON довольно прост:

[
 {
 "_id": "5be78df2fb6fc06239e0c39b",
 "name": "Albertsons",
 "sort": "list"
 },
 {
 "_id": "5be78e00fb6fc06239e0c39c",
 "name": "COSTCO",
 "sort": "list"
 },
 {
 "_id": "5be78e17fb6fc06239e0c3ac",
 "name": "Food Lion",
 "sort": "bank"
 },
 {
 "_id": "5be78e34fb6fc06239e0c3b1",
 "name": "7Eleven",
 "sort": "list"
 },
 {
 "_id": "5be78e5ffb6fc06239e0c3b7",
 "name": "Kroger",
 "sort": "bank"
 }
]

Answer 1

Вы можете использовать $.grep, чтобы отфильтровать нужные вам объекты.

$(document).ready(function(){
var jsonString = '[{"_id": "5be78df2fb6fc06239e0c39b","name": "Albertsons","sort":"list"},{"_id": "5be78e00fb6fc06239e0c39c","name": "COSTCO","sort": "list"},{"_id": "5be78e17fb6fc06239e0c3ac","name": "Food Lion","sort": "bank"},{"_id": "5be78e34fb6fc06239e0c3b1","name": "7Eleven","sort": "list"},{"_id": "5be78e5ffb6fc06239e0c3b7","name": "Kroger","sort": "bank"}]'
var jsonObject = JSON.parse(jsonString);

// Filter your object using grep
var filteredObjects = $.grep(jsonObject, function(a){
 return a.sort == "list"
});

var elements = '';
for(var i = 0; i<filteredObjects.length; i++ ){
  elements += '<div>'+filteredObjects[i].name+'</div>'
}
$('#container').append(elements);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>

Answer 2

stores - это ответ whole , который представляет собой массив, а не отдельный объект, по которому вы выполняете итерацию, поэтому stores.sort не будет иметь смысла. Вместо этого проверьте свойство store:

success: function(stores) {
  $.each(stores, function(i, store) {
    if (store.sort === 'list'){
      $stores.append(`<div><img src="${store.name}.jpg"></div>`);
    }
  });
}

Или вместо этого вы можете filter:

success: function(stores) {
  const listStores = stores.filter(({ sort }) => sort === 'list');
  listStores.forEach(({ name }) => {
    $stores.append(`<div><img src="${name}.jpg"></div>`);
  });
}