Question

Updated with actual JSON Response, Messed up last time.

It is my second day with JSON, and i am stuck at the first step of my project.

i created a wcf rest service which gives this test json response.

[{
"busyEndTime":"\/Date(928164000000-0400)\/",
"busyStartTime":"\/Date(928164000000-0400)\/",
"endGradient":1.26743233E+15,
"startGradient":1.26743233E+15,
"status":"String content"

}]

i am trying to read the content of this output and use the content for various other purposes.
By content i am referring to the “busyEndTime, busyStartTime” values etc.

I have tried numerous examples on the net, but my bad luck continues,

following are the ways i tried to read the above, but failed.

$('#btnGetTime').click(function () {
    $.ajax({
        cache: false,
        type: "GET",
        async: false,
        url: serviceAddress,
        dataType: "application/json; charset=utf-8",
        data: "{}",

 success: function (student) {

******************* Try 1

var obj = jQuery.parseJSON(student);
for (var i = 0; i < obj.length; i++) {
       alert(obj[i]);
}

********** Try 2

var obj = eval("(" + student + ")");
for (var i = 0; i < obj.length; i++) {
      alert(obj[i]);
                            }

**************Try 3

success: test(student)
.......
.....
function test(jObject) {
  var jArrayObject = jObject
  if (jObject.constructor != Array) {
      jArrayObject = new Array();
      jArrayObject[0] = jObject;
  }

**************Try 4

success: test(student)
.......
.....
function test(jObject) {
    var jArrayObject = jObject
    for (var i = 1, n = jObject.length; i < n; ++i) {
         var element = jObject[i];
................
....................
} 

*************** Try5

                    $.each(jArrayObject, function (key, value) {
                        alert(key + ": " + value);
                    });

---

I would really appreciate if some one could guide step by step, of how to read the JSON response like i have above and iterate over the array that the response contains and finally use the content that lies in the array, at least alert the key value pairs.

A quick response is all i want, i am loosing interest in jquery with each passing minute. 🙁

Answer 1

Update: Now that you’ve posted the actual JSON text, here’s an example of using it:

$.getJSON(url, function(data) {
  // jQuery will deserialize it into an object graph for
  // us, so our `data` is now a JavaScript object --
  // in this case, an array. Show how many entries we got.
  display("Data received, data.length = " +
          data.length);

  // Show the start and end times of each entry
  $.each(data, function(index) {
    display("Entry " + index +
            ": Start = " + this.busyStartTime +
            ", end = " + this.busyEndTime);
  });
});

Live copy

Output:

Loading JSON from /aduji4/4...
Data received, data.length = 1
Entry 0: Start = /Date(928164000000-0400)/, end = /Date(928164000000-0400)/

Note that the dates aren’t automagically handled unless you use a “reviver” with the JSON parser that understands that particular date format. JSON has no date format of its own, but it has this concept of a “reviver” that can be used during the deserialization process to pre-process values.

jQuery’s own JSON parser doesn’t have the “reviver” feature, but you can download ones that do (there are three on Douglas Crockford’s github page — Crockford being the inventor of JSON). Then you’d tell jQuery not to parse the JSON, and instead do it explicitly yourself. That would look like this:

// Start loading the JSON data
$.ajax({
  url: url,
  dataType: "text", // Tell jQuery not to try to parse it
  success: function(data) {

    // `data` contains the string with the JSON text.
    // Deserialize it. jQuery's own JSON parser doesn't
    // have the "reviver" concept, but this is where you
    // would use one that does, giving it the reviver.
    data = $.parseJSON(data);

    // Now we have the object graph (an array in this
    // case), show how many entries it has.
    display("Data received, data.length = " +
            data.length);

    // Show the start and end times of each entry
    $.each(data, function(index) {
      display("Entry " + index +
              ": Start = " + this.busyStartTime +
              ", end = " + this.busyEndTime);
    });
  },
  error: function() {
    display("Error loading JSON");
  }
});

Live copy

…except of course you’d use some other JSON parser rather than $.parseJSON.

---

Original answer:

The problem

i created a wcf rest service which gives this test json response.

That’s not JSON. You can read up on JSON here, and you can validate your JSON strings here. I’m not quite sure what it is. It looks a lot like XML, but like someone took the XML from a tree viewer or something (those - symbols next to the beginnings of elements).

Below, I’ll show what that data might look like in JSON, how you would work with it, and then if you want to work with XML instead, the same example using XML data.

Your data in JSON format

Here’s an idea of what that might look like in JSON:

{
    "ArrayOfBusyDateTime": [
        {
            "busyEndTime":   "2011-04-20T10:30:00",
            "busyStartTime": "2011-04-20T10:00:00",
            "endGradient":   0,
            "startGradient": 0,
            "status":        "busy"
        },
        {
            "busyEndTime":   "2011-04-20T13:00:00",
            "busyStartTime": "2011-04-20T12:00:00",
            "endGradient":   0,
            "startGradient": 0,
            "status":        "busy"
        }
    ]
}

Note that the types (element names) have gone, because JSON has no concept of element names. (If you want them, you can create a key that holds the relevant information.) So each of the two entries in the array is a busyDateTime by virtue purely of being in the ArrayOfBusyDateTime. But one of the things about JSON is that it’s very malleable, so you may prefer to do it slightly differently.

Working with that JSON data

Here’s an example of using that data:

$.getJSON(url, function(data) {
  // jQuery will deserialize it into an object graph for
  // us, so our `data` is now a JavaScript object.
  // Show how many entries we got in the array:
  display("Data received, ArrayOfBusyDateTime.length = " +
          data.ArrayOfBusyDateTime.length);

  // Show the start and end times of each entry
  $.each(data.ArrayOfBusyDateTime, function(index) {
    display("Entry " + index +
            ": Start = " + this.busyStartTime +
            ", end = " + this.busyEndTime);
  });
});

Live copy

Output:

Loading JSON from /aduji4...
Data received, ArrayOfBusyDateTime.length = 2
Entry 0: Start = 2011-04-20T10:00:00, end = 2011-04-20T10:30:00
Entry 1: Start = 2011-04-20T12:00:00, end = 2011-04-20T13:00:00

XML

For completeness, if your data really is XML, like this:

<ArrayOfBusyDateTime xmlns="http://schemas.datacontract.org/2004/07/RestServiceTest" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <BusyDateTime>
    <busyEndTime>2011-04-20T10:30:00</busyEndTime>
    <busyStartTime>2011-04-20T10:00:00</busyStartTime>
    <endGradient>0</endGradient>
    <startGradient>0</startGradient>
    <status>busy</status>
  </BusyDateTime>
  <BusyDateTime>
    <busyEndTime>2011-04-20T13:00:00</busyEndTime>
    <busyStartTime>2011-04-20T12:00:00</busyStartTime>
    <endGradient>0</endGradient>
    <startGradient>0</startGradient>
    <status>busy</status>
  </BusyDateTime>
</ArrayOfBusyDateTime>

Working with XML data:

…then here’s how you might work with that:

$.ajax({
  url: url,
  dataType: "xml",
  success: function(data) {
    // jQuery will deserialize it for us, so our
    // `data` is now an XML document. Wrap a jQuery
    // instance around it to make it easy to work with.
    data = $(data);

    // Show how many entries we got in the array
    var busyDateTimes = data.find("BusyDateTime");
    display("Data received, ArrayOfBusyDateTime length = " +
            busyDateTimes.length);

    // Show the start and end times of each entry
    busyDateTimes.each(function(index) {
      // In this loop, `this` will be the raw XML
      // element; again wrap a jQuery object around
      // it for convenience
      var $this = $(this);
      display("Entry " + index +
              ": Start = " + $this.find("busyStartTime").text() +
              ", end = " + $this.find("busyEndTime").text());
    });
  },
  error: function() {
    display("Error loading XML");
  }
});

Live copy

…although I don’t work with XML much, could be some efficiencies to be had (seems like a lot of wrapping things up in jQuery instances).

Output:

Loading JSON from /aduji4/2...
Data received, ArrayOfBusyDateTime length = 2
Entry 0: Start = 2011-04-20T10:00:00, end = 2011-04-20T10:30:00
Entry 1: Start = 2011-04-20T12:00:00, end = 2011-04-20T13:00:00