javascript - Using jQuery to process a JSON object - Stack Overflow

admin管理员组

文章数量:1341445

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?

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?

• javascript
• jquery
• ajax
• json
• data-structures

Share Improve this question Follow edited Oct 18, 2010 at 13:26 C Bauer asked Oct 18, 2010 at 13:19 C BauerC Bauer 5,11344 gold badges3737 silver badges6363 bronze badges 9

• 8 I have to say, wtf? – jAndy Commented Oct 18, 2010 at 13:21
• Sorry man, what did I do wrong here? – C Bauer Commented Oct 18, 2010 at 13:23
• @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 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 Commented Oct 18, 2010 at 13:26
• 1 @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 Commented Oct 18, 2010 at 13:33

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 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.

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(...)

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
        }
    }
}

本文标签： javascriptUsing jQuery to process a JSON objectStack Overflow