Using jQuery to process a JSON object

Question

My JSON object is constructed like this:

var Source =
{
    Object: [ //Array
        {Title: 'Test', Type: 'Pet', Category: 'Cat', Description: 'Fluffy', Count: 2 }
    ]
};

I was able to figure out how to properly add to the 'Object' array, but I can't seem to figure out the jQuery syntax to query the object based on the property list (Title, Type, Category, etc).

I put some test code into a click event and normally check the length of the Source.Object (Test data results in 2 objects) to confirm that there is data to work with (It's populated through an ajax call).

function clickTest(category, type) {
    $(Source).find('Object[Category=\"' + category + '\"]').each(function() {
        alert($(this).attr('Category')); //doesn't work
    });
}

What is the right way to query a JSON object like this?

@C Bauer: What is it you are trying to do? Do you want to query a JavaScript Object with CSS-selectors? CSS-selectors and most of jQuery's methods are meant to be used on the DOM. — jwueller
– jwueller, Commented Oct 18, 2010 at 13:25
@CBauer: the whole thing I guess. I'm not even sure what you're trying to achieve here. You have a plain javascript object, which you could just access in a way like Source.Object.Category (the name Object is probably a bad idea btw since it's a reserved word), but you're trying to pull that object into a jQuery constructor to get what? A jQuery object from a javascript object? — jAndy
– jAndy, Commented Oct 18, 2010 at 13:26
@C Bauer: XML is represented using DOM (which can be seen as a huge collection of various JavaScript objects). JSON represents a plain JavaScript object without any kind of selector-support or events. You do not need selectors for this. You can access properties of an object by using the .-operator. — jwueller
– jwueller, Commented Oct 18, 2010 at 13:33

Alex Gyoshev · Accepted Answer · 2010-10-18 13:40:16Z

7

JSON is native to JavaScript and can be cycled through without the use of libraries (jQuery). The [] represent arrays, and {} represent objects, therefore:

var obj = Source.Object;
for (var i = 0, len = obj.length; i < len; i++) {
    if (obj[i].Category == category)
        alert(obj[i].Category + ' ' + obj[i].Title);
}

And that's faster, too! Good stuff.

edited Oct 18, 2010 at 13:40

answered Oct 18, 2010 at 13:24

Alex Gyoshev

12k4 gold badges49 silver badges77 bronze badges

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

2 Comments

C Bauer Over a year ago

I'd always assumed that jQuery would be faster then building a javascript loop to make these checks.

Alex Gyoshev Over a year ago

@C Bauer: jQuery would be shorter. Pure JavaScript will be faster (since the closures call variables from other scope, etc.) After all, jQuery is written in JavaScript -- calling it won't always beat a custom solution.

Aaron Digulla · Accepted Answer · 2010-10-18 13:24:48Z

5

The source is a JSON object, not a HTML DOM. Therefore, you must use the jQuery utility functions for arrays:

$.grep( Source.Object, function(e) { return e.Category == category } ).each(...)

answered Oct 18, 2010 at 13:24

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

4 Comments

Alex Gyoshev Over a year ago

"must" sounds rather extreme, no? :)

Nick Craver Over a year ago

+1 - the rare (mostly) proper use of $.grep(), the .each() after will blow up though, it should be wrapped in a $.each(...), since .grep() returns an array.

Tatu Ulmanen Over a year ago

I would correct: "you can use the jQuery utility functions" - they're not necessary as that's just plain JavaScript.

samy Over a year ago

nice, i didn't know $.grep(object, function) but it's good to know :)

samy · Accepted Answer · 2010-10-18 13:28:34Z

1

JSon is a way to transcribe a javascript object in a string format and transmit it on the wire. One nice thing about the format is that it's directly readable by javascript, so your Source object is already ready to be processed.

function processSource(source, category)
{
    var counter = 0;
    for (counter = 0; counter < source.Object.length; counter += 1)
    {
        if (category === source.Object[counter].category) {
           // do something
        }
    }
}

answered Oct 18, 2010 at 13:28

samy

15k3 gold badges57 silver badges85 bronze badges

Collectives™ on Stack Overflow

Using jQuery to process a JSON object

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related