VB.NET JSON Object Issue

Question

UPDATE: So I've figured it out! All I had to do was use jQuery.parseJSON(); and it converted the JSON string into a JSON Object. Here is the updated code:

$.ajax({
  type: "POST",
  url: "GetEEs.aspx/GetNextEEs",
  data: "{recordID:" + lastItem + "}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (msg, textStatus, jqXHR) {
    var jObject = jQuery.parseJSON(msg.d);
    ddl.length = 0;
    $.each(jObject.d, function () {
      $.each(this, function (index, item) {
        addItemToDDL(ddl, item.Display, item.Value);
      });
    });
  },
  error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
  }
});

Ok, I've written a function to query a table and return a dataset, then convert it to JSON so the page can use it. The function is below:

    <WebMethod()> _
    Public Shared Function GetNextEEs(ByVal recordID As Integer) As ArrayList
        If Not recordID.Equals(0) Then
            Dim sql As String = "SELECT TOP 500 * FROM cbotest WHERE ID > " & recordID
            Dim arr As New ArrayList

            Using dr As SqlDataReader = Mangrove.SqlHelper.ExecuteReader("...")
                While dr.Read()
                    arr.Add(New ArrayList() From { _
                     New With { _
                      Key .Value = dr("code").ToString, _
                      Key .Display = dr("description").ToString _
                     }
                    })
                End While
            End Using

            Return arr
        Else
            Throw New ApplicationException("Invalid Record ID")
        End If
    End Function

The function works great in .Net 4, but I can't use it with .Net 2. So I found a JSON.Net Object called Jayrock. I changed my function to use it and everything works. Here is the revised function:

<WebMethod()> _
Public Shared Function GetNextEEs(ByVal recordID As Integer) As String
    If Not recordID.Equals(0) Then
        Dim sql As String = "SELECT TOP 500 * FROM cbotest WHERE ID > " & recordID
        Dim json As JsonObject = New JsonObject()
        Dim items As JsonArray = New JsonArray()

        Using dr As SqlDataReader = Mangrove.SqlHelper.ExecuteReader("...")
            While dr.Read()
                Dim item As JsonArray = New JsonArray()
                Dim itemArr As JsonObject = New JsonObject()

                itemArr.Add("Value", dr("code").ToString)
                itemArr.Add("Display", dr("description").ToString)

                item.Add(itemArr)
                items.Add(item)
            End While
        End Using

        json.Add("d", items)

        Using writer As JsonWriter = New EmptyJsonWriter()
            json.Export(writer)
            Return json.ToString
        End Using
    Else
        Throw New ApplicationException("Invalid Record ID")
    End If
End Function

The only problem is when it returns the JSON, the page can't parse it.

Here is an example of the outputs from both functions:

First Version: [object Object],[object Object],[object Object], ...

Revised Version: {"d":[[{"Value":"501","Display":"Record Number 501"}],[{"Value":"502","Display":"Record Number 502"}], ...

As you can see, the revised version returns an actual string (That contains the correct data) where as the first version returned a JSON Object. I know it's because of the function returning as a String, but for the life of me, I can't figure out how to return a JSON Object using the revised code.

Does anybody have an idea on how to do this, or a better solution? I'm stumped! Also, please remember that this is for .Net 2 (sucks, I know :/)

Thank you for your time!

EDIT Here is some of the client side code that I'm using:

$.ajax({
  type: "POST",
  url: "GetEEs.aspx/GetNextEEs",
  data: "{recordID:" + lastItem + "}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (msg, textStatus, jqXHR) {
    //alert(msg.d);
    document.getElementById('lbl').innerHTML = msg.d;
    ddl.length = 0;
    $.each(msg.d, function () {
      $.each(this, function (index, item) {
        addItemToDDL(ddl, item.Display, item.Value);
      });
    });
  },
  error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
  }
});

I had an alert(item); inside of the inner-most loop. It was going letter by letter through the string.

Answer 1

$.ajax({
  type: "POST",
  url: "GetEEs.aspx/GetNextEEs",
  data: "{recordID:" + lastItem + "}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (msg, textStatus, jqXHR) {
    var jObject = jQuery.parseJSON(msg.d);
    ddl.length = 0;
    $.each(jObject.d, function () {
      $.each(this, function (index, item) {
        addItemToDDL(ddl, item.Display, item.Value);
      });
    });
  },
  error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
  }
});