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

stores是 entire 响应，它是一个数组，而不是您要遍历的单个对象，因此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>`);
  });
}

Answer 2

您可以使用$.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>

根据具有特定键值的对象过滤并附加AJAX JSON结果

2 个答案: