Vfrdtyky

I'm trying to display the 3 records that have the value "sort":"list:"

I've tried the two methods below of using an if statement to filter results, (commented out below) to display the 3 records but both methods did not render any results to the screen? With the lines commented out as below the page correctly renders all 5 results. Any advice is appreciated THANKS!

$.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>`);

    //  }

     });

  //}

   }

 });

My JSON is pretty simple:

[

 {

 "_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"

 }

]

stores is the entire response, which is an array, not an individual object you're iterating over, so stores.sort won't be meaningful. Check the store property instead:

success: function(stores) {

  $.each(stores, function(i, store) {

    if (store.sort === 'list'){

      $stores.append(`<div><img src="${store.name}.jpg"></div>`);

    }

  });

}

Or, you might filter beforehand instead:

success: function(stores) {

  const listStores = stores.filter(({ sort }) => sort === 'list');

  listStores.forEach(({ name }) => {

    $stores.append(`<div><img src="${name}.jpg"></div>`);

  });

}

You can use $.grep to filter out the objects you want.

$(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>