如何仅使用 JavaScript 正确读取 json 文件 [重复]

Posted

技术标签:

【中文标题】如何仅使用 JavaScript 正确读取 json 文件 [重复]【英文标题】:How to read json file correctly using only JavaScript [duplicate] 【发布时间】:2019-10-27 16:46:47 【问题描述】:

我需要创建 html 选择器并从 JSON 中获取它们的值,我创建了 JSON 并尝试通过在 html 文档中再添加一个来读取它,然后使用 JS 解析为变量,但它不起作用,答案我发现这并没有真正帮助。

HTML:

<body>
    <form>
        <label>Select list</label>
        <select id = "Coutries">

        </select>
        <select id = "Bands">

        </select>
        <select id = "Albums">

        </select>   
    </form> 
    <script src="data.json"></script>
    <script src="script.js"></script>
</body>

javascript

const data = JSON.parse(data);

【问题讨论】:

【参考方案1】:

你试过了吗:

$.getJSON('yourFile.json', function(data) 
    var arr= [];
      $.each( data, function( key, val ) 
    var tempArr=[key,val]
        arr.push( tempArr );
      );
    );

【讨论】:

用户使用jQuery的问题中没有任何提示。也没有任何迹象表明他们想要将data 转换为数组数组。【参考方案2】:

您无法通过 script 元素加载 JSON。相反,在你的script.js,你可以fetch它:

fetch("data.json")
.then(response => 
    if (!response.ok) 
        throw new Error("HTTP error " + response.status);
    
    return response.json();
)
.then(data => 
    // Use the data here, it's been parsed
)
.catch(error => 
    // Handle/report error here
);

【讨论】:

以上是关于如何仅使用 JavaScript 正确读取 json 文件 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何仅使用客户端 JavaScript 正确签署对 Amazon 的 ItemLookup 的 GET 请求?

Spark 读取带有部分模式的 json

如何在此处正确实现去抖动时间,以便在纯 JavaScript 中每个时间限制仅触发一次?

如何在 javascript 中读取和显示 xlsx 文件

当从JavaScript中的外部文本文件中读取时,如何正确显示国家标志(UTF-8)?

如何从 Pentaho 的 javascript 步骤中的另一行读取?