我正在尝试显示一个“警告”框,其中包含来自JSON文件的文本。但是似乎我无法从JSON文件中获取数据。它只是不会引发警报框。
var thebook = JSON.parse(book);
function showAlert() {
alert(thebook[0].word);
}
<head>
<script type="text/javascript" src="book.json"></script>
</head>
<body>
<button onclick="showAlert()">show alert</button>
</body>
还有一个示例JSON文件
[
{
"word" : "cuiller",
"page" : 23
},
{
"word" : "arbre ",
"page" : 245
}
]
答案 0 :(得分:1)
您需要从JS代码内部请求资源,而不仅仅是引用它 您可以通过XMLHttpRequest执行此操作,该操作将从文件中返回文本,然后可以使用JSON.parse
将文本解析为对象一个例子看起来像这样
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
答案 1 :(得分:1)
在您的book.json
中,将JSON存储在变量中(如下面给出的var book
)。
var book = [
{
"word" : "cuiller",
"page" : 23
},
{
"word" : "arbre ",
"page" : 245
}
];
在解析/修改它之前将其字符串化。
thebook = JSON.parse(JSON.stringify(book));
function showAlert() {
alert(thebook[0].word);
}
有效的JSFiddle链接: https://jsfiddle.net/h5knqobs/9/
希望这会有所帮助!
答案 2 :(得分:1)
这是从文件中检索JSON的方式
var book = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "/book.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
将JSON值存储到变量中之后,按如下方式进行解析。
var thebook = JSON.parse(JSON.stringify(book));
编辑
这是我的答案的更好版本
var book = null;
$.ajax({
'async': false,
'global': false,
'url': "/test.json",
'dataType': "json",
'success': function (data) {
book = data;
}
});
在showAlert
函数中,您可以简单地调用book[0].word
。