無法從小型JSON讀取數據
[英]Not able to read data from small JSON
問題描述
我現在要找兩個小時
如何讀取我的JavaScript文件中的Json數據，將其保存到var中並打印出來。
我只是無法使其工作..我遇到的每個解決方案都不適合我（因為我是JS noob），請幫幫我：
我的Json文件：
var Quotes = {
"allQuotes": [{
"person": "- Martin Luther King Jr.",
"quote": "In the End, we will remember not the words of our enemies, but the silence of our friends."
}, {
"person": " Uknown",
"quote": "I am big! It is the pictures that got small."
}, {
"person": "- Apocalypse Now",
"quote": " love the smell of napalm in the morning."
}, {
"person": " - Gone With the Wind",
"quote": "Frankly, my dear, I do not give a damn."
}, {
"person": "- - Knute Rockne All American",
"quote": " Tell em to go out there with all they got and win just one for the Gipper."
}, {
"person": "- Walt Disney",
"quote": " It is kind of fun to do the impossible."
}]
}
我正在使用CodePen，但我忘了告訴我： http ://codepen.io/pat_the_hat_1992/pen/qqWmYL
//您可以在那里看到我的混亂並進行編輯
3 個解決方案
解決方案1
0 2016-11-02 19:32:19
嘗試下面的代碼，這就是我在做什么
var obj = JSON.parse(Quotes);
for (var i = 0; i < obj.allQuotes.length; i++) {
var counter = obj.allQuotes[i];
alert(counter.person+" says "+ counter.quote);
}
解決方案2
0 已采納 2016-11-02 19:35:24
您所擁有的不是有效的JSON。 JSON只是一種數據格式。 您正在混合使用JavaScript和JSON。 您不能在JSON文件中分配（或創建）變量。
{
"allQuotes": [{
"person": "- Martin Luther King Jr.",
"quote": "In the End, we will remember not the words of our enemies, but the silence of our friends."
}, {
"person": " Uknown",
"quote": "I am big! It is the pictures that got small."
}, {
"person": "- Apocalypse Now",
"quote": " love the smell of napalm in the morning."
}, {
"person": " - Gone With the Wind",
"quote": "Frankly, my dear, I do not give a damn."
}, {
"person": "- - Knute Rockne All American",
"quote": " Tell em to go out there with all they got and win just one for the Gipper."
}, {
"person": "- Walt Disney",
"quote": " It is kind of fun to do the impossible."
}]
}
不使用var Quotes =會使您的JSON文件有效。
可以使用XMLHttpRequest對象以Javascript下載JSON文件，如果使用jQuery，則可以使用$.ajax下載JSON文件。
香草Javascript示例
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/myJsonFile.json');
xhr.onload = function() {
var quotes = JSON.parse(xhr.responseText);
console.log(quotes);
};
xhr.send();
或...，如果您使用jQuery：
jQuery范例
$.ajax({
method: "GET",
url: "http://localhost/myJsonFile.json",
dataType: "json",
success: function(json) {
console.log(json);
}
});
注意，使用$.ajax或XMLHttpRequest要求您將文件托管在Web服務器上。 如果頁面位於本地文件系統中這是行不通的。
進一步閱讀
有關XMLHttpRequest更多信息https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
JSON更多信息https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON
jQuery的$.ajax更多信息： http : //api.jquery.com/jquery.ajax/
解決方案3
0 2016-11-02 19:40:45
您是否嘗試過W3C網站上顯示的方法？ 它使用'+'來制作JSON文本：
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
然后將JSON轉換為Javascript對象，以便Javascript可以讀取它：
var object = JSON.parse(text);
要在代碼中使用該對象，您將使用類似以下的內容：
document.getElementById("id").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
在此示例中，它將打印“ John Doe”，因為obj.employees [0] .firstName等於“ John”，而obj.employees [0] .lastName等於“ Doe”
如果您想使用JQuery來打印數據：
$("id").append(obj.employees[0].firstName + " " + obj.employees[0].lastName);
要么
$("id").text(obj.employees[0].firstName + " " + obj.employees[0].lastName);
有關如何將其實現到實際網頁上的示例代碼（此示例將“ Anna Smith”打印到H1元素中）：
<!DOCTYPE html>
<html>
<body>
<h1 id="demo"></h1>
<script>
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>
從JSON讀取數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.