Question

我需要创建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);

Answer 1

您无法通过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
});

Answer 2

您尝试过吗：

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

如何仅使用JavaScript正确读取json文件

2 个答案: