Question

我创建了一个像这样的JSON：

{"data":[{"content":"Event1","start":"new Date(2014,07,10)"},{"content":"Event2","start":"new Date(2014,07,17)"}],"success":true}

为了在Javascript中使用以下代码：

 data = [
          {
             'start': new Date(2010,7,23),
             'content': 'Event'
          },
          {
             'start': new Date(2010,7,23),
             'content': 'Event'
          },
];

与我有JSON，我可以轻松访问字段，例如：

json.data[0].content

返回：“Event1”

我的问题是：我如何使Javascript代码“动态”加载我的JSON中的每个组件，假设我不知道它将包含多少元素？

目前，我已经完成了以下代码：

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/Test", true); // Call to a java servlet 
xhr.send();  

var json;
var jsonLength; 
var data; 

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    json = JSON.parse(xhr.responseText);
    jsonLength = json.data.length; 
  }
}

 data = [];

 for(var i = 0 ; i < jsonLength ; i++){
    data.push({
       'start':json.data[i]['start'],
       'content':json.data[i]['content']
     })
 }

timeline.draw(data);

编辑：我甚至没有进入for循环...为什么？

Answer 1

这非常简单，因为它们只是JavaScript中的数组和哈希对象。

所以你可以迭代它们：

for(var i = 0; i < json.data.length; i++) {
  var item = data[i];
  // Insert this into your data table
  // Here you can use item which is set to the current item you are iterating over
}

JavaScript甚至让您检查自己，这样您就可以查看单个数据项并找出它具有的相似属性（有关详细信息，请参阅this question）：

var keys = [];
for(var k in obj) keys.push(k);

<强>更新

看起来你已陷入JavaScript规定的异步性陷阱。函数xhr.onreadystatechange仅在事件发生时调用，该函数下面的代码立即执行。因此，您在迭代空数据集的位置，因为您所查看的数据尚未加载。

JavaScript非常基于回调，尤其是AJAX。在代码运行时请始终牢记，在这种情况下，xhr.onreadystatechange = function会立即返回并继续运行代码。只有在函数内部才能期望正确设置变量。

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/Test", true); // Call to a java servlet 
xhr.send();  

var json;
var jsonLength; 
var data; 

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    json = JSON.parse(xhr.responseText);
    jsonLength = json.data.length; 


    data = [];

    for(var i = 0 ; i < jsonLength ; i++){
       data.push({
          'start':json.data[i]['start'],
          'content':json.data[i]['content']
       })
    }

    timeline.draw(data);

  }
}

Answer 2

如果您的json是字符串，只需执行

obj = JSON.parse(jsonString);

然后您将拥有一个包含json数据的对象，您可以使用obj [0] .content（作为示例）访问该对象

否则，只需迭代json对象，就像Tigraine说的那样。

（你的问题有点不清楚）

Answer 3

试试这个：

var x={"data":[{"content":"Event1","start":"new Date(2014,07,10)"},{"content":"Event2","start":"new Date(2014,07,17)"}],"success":true};

for(i=0;i<x.data.length;i++)
    {
     console.log("content: "+x.data[i].content+" start: "+ x.data[i].start);
    }

Answer 4

    <script type="text/javascript">
        var json = {
            'data': [
                {
                    'start': new Date(2010, 7, 23),
                    'content': 'Event'
                },
                {
                    'start': new Date(2010, 7, 23),
                    'content': 'Event'
                },
            ]
        };
        alert(json['data'].length);
        $(function() {
        });
    </script>

Json创建适合结构

4 个答案: