Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Update</strong>: Now that you've posted the actual JSON text, here's an example of using it:</p> <pre><code>$.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); }); }); </code></pre> <p><a href="http://jsbin.com/obama4/4" rel="nofollow">Live copy</a></p> <p>Output:</p> <pre>Loading JSON from /aduji4/4... Data received, data.length = 1 Entry 0: Start = /Date(928164000000-0400)/, end = /Date(928164000000-0400)/</pre> <p>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.</p> <p>jQuery's own JSON parser doesn't have the "reviver" feature, but you can download ones that do (there are three on <a href="https://github.com/douglascrockford/JSON-js/" rel="nofollow">Douglas Crockford's github page</a>&nbsp;&mdash; Crockford being the inventor of JSON). Then you'd tell jQuery <em>not</em> to parse the JSON, and instead do it explicitly yourself. That would look like this:</p> <pre><code>// 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"); } }); </code></pre> <p><a href="http://jsbin.com/obama4/6" rel="nofollow">Live copy</a></p> <p>...except of course you'd use some other JSON parser rather than <code>$.parseJSON</code>.</p> <hr> <p><strong>Original answer</strong>:</p> <h3>The problem</h3> <blockquote> <p>i created a wcf rest service which gives this test json response.</p> </blockquote> <p>That's not JSON. You can read up on JSON <a href="http://json.org" rel="nofollow">here</a>, and you can validate your JSON strings <a href="http://jsonlint.com" rel="nofollow">here</a>. 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 <code>-</code> symbols next to the beginnings of elements).</p> <p>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.</p> <h3>Your data in JSON format</h3> <p>Here's an idea of what that might look like in JSON:</p> <pre><code>{ "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" } ] } </code></pre> <p>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 <code>busyDateTime</code> by virtue purely of being in the <code>ArrayOfBusyDateTime</code>. But one of the things about JSON is that it's very malleable, so you may prefer to do it slightly differently.</p> <h3>Working with that JSON data</h3> <p>Here's an example of using that data:</p> <pre><code>$.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); }); }); </code></pre> <p><a href="http://jsbin.com/obama4" rel="nofollow">Live copy</a></p> <p>Output:</p> <pre>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</pre> <h3>XML</h3> <p>For completeness, if your data really is XML, like this:</p> <pre><code>&lt;ArrayOfBusyDateTime xmlns="http://schemas.datacontract.org/2004/07/RestServiceTest" xmlns:i="http://www.w3.org/2001/XMLSchema-instance"&gt; &lt;BusyDateTime&gt; &lt;busyEndTime&gt;2011-04-20T10:30:00&lt;/busyEndTime&gt; &lt;busyStartTime&gt;2011-04-20T10:00:00&lt;/busyStartTime&gt; &lt;endGradient&gt;0&lt;/endGradient&gt; &lt;startGradient&gt;0&lt;/startGradient&gt; &lt;status&gt;busy&lt;/status&gt; &lt;/BusyDateTime&gt; &lt;BusyDateTime&gt; &lt;busyEndTime&gt;2011-04-20T13:00:00&lt;/busyEndTime&gt; &lt;busyStartTime&gt;2011-04-20T12:00:00&lt;/busyStartTime&gt; &lt;endGradient&gt;0&lt;/endGradient&gt; &lt;startGradient&gt;0&lt;/startGradient&gt; &lt;status&gt;busy&lt;/status&gt; &lt;/BusyDateTime&gt; &lt;/ArrayOfBusyDateTime&gt; </code></pre> <h3>Working with XML data:</h3> <p>...then here's how you might work with that:</p> <pre><code>$.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"); } }); </code></pre> <p><a href="http://jsbin.com/obama4/2" rel="nofollow">Live copy</a></p> <p>...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).</p> <p>Output:</p> <pre>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</pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload