Is this JSON correct and if so how to iterate through each object in JavaScript - Asp .Net 3.5

Question

I have created a C# web service that retrieves a data table with 2 columns, that data table is serialized using JavaScriptSerializer.

Using FireBug, I see the following JSON which appears correct to me:

"{"d":"[{\"Text\":\"4 blah blah2\",\"Value\":\"16\"},{\"Text\":\"asdf\",\"Value\":\"15\"},{\"Text\":\"qwerty\",\"Value\":\"13\"}]"}"

On the client-side, I am receiving the object as expected using this call:

 $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "../../Services/Filter.asmx/GetComboBoxContents",
            data: '{ strFilter: "' + selText + '" }',
            datatype: "json",
            success: function(result) { onGetComboBoxOneContents(result); },
            fail: function(result) { alert(result); }
        });

As expected, function onGetComboBoxOneContents(msg) is called, I have tried numerous ways, but I am unable to resolve the individual items. Here is the latest version:

function onGetComboBoxOneContents(msg) {
    var evalResult = eval("(" + msg + ")");

    var cbo = getComboFilterOneObject;
    ClearComboBox(cbo);

    for (var i = 0; i < evalResult.d.length; i++) {
        AddToComboBox(cbo, evalResult.d[i].Value, evalResult.d[i].Text);
    }
}

The goal of the function is to parse out of the JSON each Value and Text pair and send that to a separate function. Since I'm using .Net 3.5, the d is expected.

Any assistance is greatly appreciated.

EDIT: I've updated the client-side code to below, however msg.d[i].Value and msg.d[i].Text in the loop are still undefined.

function onGetComboBoxOneContents(msg) {

    var cbo = getComboFilterOneObject;
    ClearComboBox(cbo);

    for (var i = 0; i < msg.d.length; i++) {
        AddToComboBox(cbo, msg.d[i].Value, msg.d[i].Text);
    }
}

EDIT: I've gotten it to work, but it still requires me to use eval, here's my solution which works for me:

function onGetComboBoxOneContents(msg) {
    var evalResult = eval(msg.d);

    var cbo = $("#" + getComboFilterOneObject);
    ClearComboBox(cbo);

    for (var i = 0; i < evalResult.length; i++) {
        AddToComboBox(cbo, evalResult[i].Value, evalResult[i].Text);
    }
    cbo.initializeOptionList();
}

Answer 1

Since you are using jQuery and specifying the type of the result as json, you don't need to parse or evaluate anything, jQuery will safely evaluate the response as JSON and return a JavaScript Object.

On your callback you can access directly to the object, like this:

function onGetComboBoxOneContents(msg) {
    var cbo = getComboFilterOneObject;
    ClearComboBox(cbo);

    for (var i = 0; i < evalResult.d.length; i++) {
        AddToComboBox(cbo, msg.d[i].Value, msg.d[i].Text);
    }
}

Edit: I see what is the problem now, JavaScript is case sensitive, in your Ajax request you are setting the datatype option, not dataType, that's why jQuery is returning you a string:

 $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "../../Services/Filter.asmx/GetComboBoxContents",
            data: '{ strFilter: "' + selText + '" }',
            dataType: "json",
            success: function(result) { onGetComboBoxOneContents(result); },
            fail: function(result) { alert(result); }
        });

Answer 2

You may want to look at this tutorial, as, as CMS mentioned, jQuery will do the main work for you.

http://blog.reindel.com/2007/10/02/parse-json-with-jquery-and-javascript/

If you want to do the parsing yourself, I am not a big fan of using eval, but prefer some security provided by libraries found at http://json.org/, if you need to do any parsing of json on the .net side.

If you are using firebug, then just walk through your loop and look at the values of the results from json. The debugger is the best part of firebug, IMO. :)