JSON对数组的简单迭代

时间:2011-04-22 16:29:03

标签: jquery arrays wcf json iteration

更新了实际的JSON响应,上次搞砸了。

这是我与JSON的第二天,我被困在项目的第一步。

我创建了一个wcf rest服务,它提供了这个测试json响应。

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

}]

我正在尝试阅读此输出的内容,并将内容用于各种其他目的。 通过内容我指的是“busyEndTime,busyStartTime”值等。

我在网上尝试了很多例子,但我的运气不好,

以下是我尝试阅读上述内容的方法,但失败了。

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

 success: function (student) {

** * ** * ** * 的** * ** * ** * * 尝试1

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

** * ** * ** * 的* 试试2

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

** * ** * ** * 的** * * *尝试3

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

** * ** * ** * 的**** *试试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);
                    });

我真的很感激,如果有人可以一步一步地指导如何像上面那样读取JSON响应并迭代响应包含的数组,最后使用数组中的内容,至少是警报关键值对。

快速回复就是我想要的,我对每一分钟的jquery失去兴趣。 :(

2 个答案:

答案 0 :(得分:4)

更新:现在您已经发布了实际的JSON文本,以下是使用它的示例:

$.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

输出:

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

请注意,除非您使用能够理解特定日期格式的JSON解析器的“reviver”,否则不会自动处理日期。 JSON没有自己的日期格式,但它具有“reviver”的概念,可以在反序列化过程中用于预处理值。

jQuery自己的JSON解析器没有“reviver”功能,但你可以下载那些(Douglas Crockford's github page上有三个 - Crockford是JSON的发明者)。然后你告诉jQuery 解析JSON,而是自己明确地做。这看起来像这样:

// 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

...除了你当然使用其他JSON解析器而不是$.parseJSON


原始回答

问题

  

我创建了一个wcf rest服务,它提供了这个测试json响应。

那不是JSON。您可以阅读JSON here,并且可以验证您的JSON字符串here。我不太确定它是什么。它看起来很像XML,但就像有人从树查看器或某些东西(元素开头旁边的那些-符号)中获取XML。

下面,我将展示JSON中的数据,您将如何使用它,然后如果您想使用XML,使用XML数据的相同示例。

您的JSON格式数据

以下是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"
        }
    ]
}

请注意,类型(元素名称)已经消失,因为JSON没有元素名称的概念。 (如果你需要它们,你可以创建一个包含相关信息的密钥。)因此,数组中的两个条目中的每个条目都是busyDateTime,纯粹属于ArrayOfBusyDateTime。但是关于JSON的一个原因是它具有很强的可塑性,所以你可能更愿意这样做。

使用该JSON数据

以下是使用该数据的示例:

$.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

输出:

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

为了完整起见,如果您的数据确实是XML,请执行以下操作:

<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>

使用XML数据:

...那么这就是你如何使用它:

$.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

...虽然我不太习惯使用XML,但可能会有一些效率(似乎在jQuery实例中包含很多东西)。

输出:

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

答案 1 :(得分:1)

它对我来说看起来不像JSON!它看起来像XML。

JSON非常简单,并在此处记录:http://www.json.org/

您可能发现的内容可能是对WCF失去兴趣的原因,但不是JSON / javascript / jQuery。