如何仅使用 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 文件 [重复]的主要内容，如果未能解决你的问题，请参考以下文章