无法从外部本地json获取数据

时间:2018-07-12 08:53:19

标签: javascript json

我正在尝试显示一个“警告”框,其中包含来自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
  }
]

3 个答案:

答案 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();

https://www.w3schools.com/js/js_json_parse.asp

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