Better JSON data structure

Question

I have following jQuery code and it works fine and I am able to deserialize it in the server properly.

But when I tried to create a variable and pass that as a JSON object, it didn’t work. (The commented code didn’t work. The values didn’t reach the server correctly).

Reference: http://www.json.org/js.html

How can we define the variable correctly for the JSON object?

$(".searchCostPages").click(function () {


        var url = '/SearchDisplay/' + 'TransferSearchCriteria';

        //var searchCriteria = {};
        //searchCriteria.Accrual = "A";
        //searchCriteria.Brand = "B";

    //$.getJSON(url, {searchCriteria: searchCriteria
        //}, function (data) {
        //    if (data.length) {
        //        alert('Success');
        //    }

        //});

        $.getJSON(url, {
            "Accrual": "A",
            "Brand": "B"
                    }, function (data)
                    {
                        if (data.length)
                        {
                            alert('Success');
                        }

                    });



    });

Working - Network Header:

enter image description here

Not Working - Network Header:

enter image description here

UPDATE

Following code worked here. Also refer jQuery Ajax parameters are not formatted properly

    var searchCriteria = {};
    searchCriteria.Accrual = "A";
    searchCriteria.Brand = "B";

    $.getJSON(url, searchCriteria
    , function (data) {
        if (data.length) {
            alert('Success');
        }

    });

JSON has nothing to do with the data you send, it specifies the data you receive, the problem is that the URL you're requesting does not handle an array — omma2289, Sep 11 '13 at 16:51
@koala_dev - there's nothing to stop you sending JSON encoded data to a server — phuzi, Sep 11 '13 at 16:57

Michael Geary · Accepted Answer · 2013-09-11T16:57:19.870

4

Your two examples do not pass the same data argument to $.getJSON().

The working example passes this object:

{
    Accrual: "A",
    Brand: "B"
}

The non-working example passes this object:

{
    searchCriteria: {
        Accrual: "A",
        Brand: "B"
    }
}

See the difference?

To fix the non-working example, where you pass { searchCriteria: searchCriteria } into $.getJSON(), you can change it to searchCriteria, thus removing the extra level of object.

Also note that these are JavaScript objects you're working with here, not JSON. For example, you don't have to quote the property names like "Accrual" as required by JSON. (It doesn't hurt anything to quote the property names, it just isn't necessary in a JavaScript object.) It's useful to know when you are dealing specifically with JSON and when you are dealing with ordinary JavaScript objects, because they're not the same thing.

edited Sep 11 '13 at 16:57

answered Sep 11 '13 at 16:50

Michael Geary

28,450
9
65
75

Your suggestion works.. Thanks.. Still I am not clear why the object is not a JSON? What is really a JSON object then? – LCJ Sep 11 '13 at 17:04
1

There's really no such thing as a "JSON object". JSON is a *string* format. That is, JSON is a way to *represent* objects and arrays and other data types. But JSON itself is always a string. What you're using in your code with the curly braces are JavaScript object literals. These are also a way to represent objects in textual form, and an object literal is very similar to a JSON string, but they're not the same thing, as shown for example by the fact that you don't have to quote property names in a JavaScript object literal while you do have to in JSON. – Michael Geary Sep 11 '13 at 17:15
1

Also, when you're working in JavaScript code, you're generally dealing with objects directly, whether you use an object literal to create them in the first place or not. For example, `var foo = { a: 'b' };` and `var foo = new Object; foo.a = 'b';` do exactly the same thing even though one uses an object literal and the other does not. So generally in JavaScript code we talk about objects and arrays and other types without distinguishing whether we created those things with special literals or other techniques. – Michael Geary Sep 11 '13 at 17:19

score 0 · Answer 2 · answered Sep 11 '13 at 16:55

Your commented code passes a different object to the non-commented code

Commented data (non-working):

{
    searchCriteria: {
        Accrual: "A",
        Brand: "B"
    }
}

Uncommented data (working):

{
    Accrual: "A",
    Brand: "B"
}

the original commented ajax request should be:

$.getJSON(url, searchCriteria, function (data) {
    if (data.length) {
        alert('Success');
    }
});

Better JSON data structure

2 Answers2

Linked