从外部json文件获取对象数组并在javascript中以数组forms存储

如何从EXTERNAL json文件中将javascript数组分配给对象数组？

这是我尝试过的。

JavaScript代码段

var i = 0; var testjson = $.getJSON('/TestJSON'); jsonObj = JSON.parse(testjson); $("#testJSONBtn").click(function () { while (i <= jsonObj.events.length) { $("#JSONOutput").append(jsonObj.events[i].title + ", " + jsonObj.events[i].date + ", " + jsonObj.events[i].explanation + "
") i += 1; } }); 

JSON文件内容

 { "events": [ {"title":"Okmulgee Public Schools Starts 3rd Quarter" , "date":"1-2-2013" , "explanation":"Okmulgee Public Schools begins its third quarter."} {"title":"Okmulgee Public Schools-Closed in Observance of Martin Luther King Jr. Holiday" , "date":"1-21-2013" , "explanation":"The Okmulgee Public Schools will be closed in observance of the Martin Luther King Jr. holiday."} {"title":"Okmulgee Public Schools County Professional Day" , "date":"2-1-2013" , "explanation":"Okmulgee Public Schools County Professional Day is today."} ] } 

我究竟做错了什么？

Answer 1

AJAX函数没有数据返回值 ，它们只返回一个AJAX对象。

你需要使用回调。

试试这个：

 $.getJSON('/TestJSON', function(jsonObj){ $("#testJSONBtn").click(function () { for(var i = 0; i < jsonObj.events.length; ++i) { $("#JSONOutput").append(jsonObj.events[i].title + ", " + jsonObj.events[i].date + ", " + jsonObj.events[i].explanation + "
") } }); }); 

更好：

 var btn = $("#testJSONBtn"); //cache the element var output = $("#JSONOutput"); // ^^^ $.getJSON('/TestJSON', function(jsonObj){ btn.click(function () { var val = ""; for(var i = 0; i < jsonObj.events.length; ++i) { val += jsonObj.events[i].title + ", " + jsonObj.events[i].date + ", " + jsonObj.events[i].explanation + "
"; } output.append(val); }); }); 

---

侧点：

我不知道它是否有意，但在您的OP中，JSON文件看起来不合法，您缺少逗号。 （ 来源 ）

Answer 2

你的问题在这里：

 var testjson = $.getJSON('/TestJSON'); jsonObj = JSON.parse(testjson); 

$.getJSON已经将JSON解析为JavaScript对象，并将其传递给回调。

改为使用它：

 $.getJSON('/TestJSON', function (jsonObj) { $("#testJSONBtn").click(function () { $.each(jsonObj.events, function (){ $("#JSONOutput").append(this.title + ", " + this.date + ", " + this.explanation + "
"); }); }); }); 

PS的性能，考虑缓存你的选择器，并一举追加它。

Answer 3

您的问题的标题表明您希望“从外部json文件获取对象数组并在javascript中存储为数组”，因此我提出的解决方案涉及将数据存储在数组中。

 var i; // Prepare an empty array to store the results var array = []; // $.getJSON() is a wrapper for $.ajax(), and it returns a deffered jQuery object var deferred = $.getJSON('/TestJSON'); deferred.done(function (response) { // Any code placed here will be executed if the $.getJSON() method // was completed successfully. for ( i = 0 ; i < response.length ; i++ ) { array.push({ title: response.title, date: response.date, explanation: response.explanation }); } }); 

您可以找到有关$ .getJSON（）函数返回值的更多信息，以及有关使用延迟对象的更多信息。