Referencing JSON object to filter with jQuery.grep()

Question

Thanks to this post, in which the accepted answer includes a JS Fiddle, I was able to verify that I can filter my data using jQuery.grep(). However, I am not able to replicate the effect using output from my server. I suspect I am overlooking something obvious in the object referencing, but being new to JavaScript I think I need someone to point it out for me.

This is my data output, an array of objects:

[{"id":"3","src":"url1","category":"A"},
{"id":"32","src":"url2","category":"D"},
{"id":"38","src":"url3","category":"E"},
{"id":"39","src":"url4","category":"E"},
{"id":"42","src":"url5","category":"F"},
{"id":"49","src":"url6","category":"B"},
{"id":"44","src":"url7","category":"F"}]

I use the following code to filter entries within category F:

var obj = [{"id":"3","src":"url1","category":"A"},
{"id":"32","src":"url2","category":"D"},
{"id":"38","src":"url3","category":"E"},
{"id":"39","src":"url4","category":"E"},
{"id":"42","src":"url5","category":"F"},
{"id":"49","src":"url6","category":"B"},
{"id":"44","src":"url7","category":"F"}];

obj = $.grep(obj, function(element, index){
  return element.category == "F" // keep elements in category F
});

console.log(obj);

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

This is my Ajax call to the server:

var obj = $.post( url, {term: term }, function(data){
}, 'json'
);

When performing console.log(obj); I find my data output as an Object in the console, but can't seem to get to it. For the grep function to work, I need to access the output as an array of objects. It is there, waiting for me, but how do I reference it?

Always use triple equals (===) when doing string comparisons. — Samuel Lindblom
– Samuel Lindblom, Commented Jul 13, 2016 at 13:18
It is a best practice, where === also does type checking and is therefore more predictable. Here is some more information: stackoverflow.com/questions/359494/…. — Samuel Lindblom
– Samuel Lindblom, Commented Jul 13, 2016 at 19:59

charlietfl · Accepted Answer · 2016-07-13 12:46:07Z

1

When you do:

var obj = $.post( url, {term: term }, function(data){
}, 'json');

obj is a promise not the response data

You need to access the response data inside the success callback

$.post( url, {term: term }, function(data){
    var obj = $.grep(data, function(element, index){
        return element.category == "F" // keep elements in category F
    });
    console.log(obj);    
}, 'json' );

answered Jul 13, 2016 at 12:46

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

charlietfl Over a year ago

remember that ajax is asynchronous

guiltybyintent Over a year ago

Could you please elaborate? What are the implications of asynchronous calls in this case?

charlietfl Over a year ago

Best explained in this tutorial type answer stackoverflow.com/questions/14220321/…

Collectives™ on Stack Overflow

Referencing JSON object to filter with jQuery.grep()

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related