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

Posted

技术标签:

【中文标题】无法从外部本地 json 获取数据【英文标题】:can't get data from external local json 【发布时间】:2018-12-20 10:10:20 【问题描述】:

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

【问题讨论】:

代码顶部book的值是多少? 似乎您尝试以错误的方式加载 json。看看这个:***.com/questions/13515141/… 【参考方案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

【讨论】:

为什么需要把js对象转成json再解析回来?只需直接使用数据对象设置书籍,因为您已禁用异步它不像承诺不会返回 OP 说 OP 试图从 JSON 文件中获取数据,而不是直接从 JS 代码中获取 JSON。 我想你错过了我的意思,你的成功回调已经将 json 解析为一个 js 对象作为你指定的 json 数据类型,所以你在 json = data 处设置 json 为 js 对象所以@ 987654327@ 可以替换为var thebook = data 感谢@MikeT 找到更有效的方法。【参考方案2】:

你需要从你的 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

【讨论】:

如何回答 OP 问题? @executable 它完全按照要求回答了问题,尽管我承认语言可能更清晰【参考方案3】:

在您的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/

希望这会有所帮助!

【讨论】:

不是 OP 想要从文件中检索 json 吗? @david 感谢您指出.. 更正了我的代码,检查上面的编辑代码 将 json 文件转换为 js 文件是可行的,但不符合他们想要做的事情的精神 我同意你@MikeT,但这是OP的要求,因此选择了这种方式。 :-)

以上是关于无法从外部本地 json 获取数据的主要内容,如果未能解决你的问题,请参考以下文章

pyhton 从web获取json数据 保存到本地然后再读取

从 MySQL 获取数据并使用 JSON 在 ListView 中显示

从外部 URL 获取 JSON 数据并将其以纯文本形式显示在 div 中

使用改造从(本地)android资产文件夹获取Json数据

react-native 如何从本地JSON文件中获取数据?

将本地 mongo db 迁移到 atlas 后无法从 atlas 获取记录