javascript加載並使用json數據文件

Question

我需要加載data.json文件，並在HTML屏幕上打印“ a”的名稱和年齡。 如何加載data.json文件？ 我不想使用jQuery。 謝謝

的index.html

<html>
<head>

<head>
<body>
<script>

    var obj = JSON.parse(a);

    for (i in obj.types) {
       x+= "<h2>"+obj.types[i].name+"</h2>";
       x+= obj.types[i].age + "<br>";
    }
    document.getElementById("demo").innerHTML = x; 

</script>
</body>

輸出應該是這樣的：

A1

三十

a2

20

我的json文件

data.json

{
    "a": [
        {
            "name": "a1",
            "age": 30,
            "models": [
                "a",
                "b",
                "c"
            ]
        },
        {
            "name": "a2",
             age": 20,
            "models": [
                "a",
                "b"
            ]
        }   
],
    "b": [
        {
            "Number": "001",
            "Name": "b1",

        }
]
}

Answer 1

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "./data.json", true);    
    xhr.onload = function (){
        obj = JSON.parse(this.responseText);
        var x = "";
        obj.a.forEach(function(e){
            x += "<h2>"+e.name+"</h2>";
            x += "<span>"+e.age+"</span>";
        })
  document.getElementById("demo").innerHTML = x; 
}
xhr.send();

向./data.json發出ajax請求，然后解析它。

要么

只需將數據添加到代碼本身即可。

 var obj = { "a": [ { "name": "a1", "age": 30, "models": [ "a", "b", "c" ] }, { "name": "a2", "age": 20, "models": [ "a", "b" ] } ], "b": [ { "Number": "001", "Name": "b1", } ] }; var x = ""; obj.a.forEach(function(e){ x += "<h2>"+e.name+"</h2>"; x += "<span>"+e.age+"</span>"; }) document.getElementById("demo").innerHTML = x;

 <div id="demo"> </div>

Answer 2

您無法將文件從本地加載到瀏覽器。 您需要為文件json創建服務（例如： http：// localhost：8080 / data.json ），然后請求它

javascript加載並使用json數據文件

問題描述

A1

a2

data.json

2 個解決方案

解決方案1
1 已采納 2017-08-18 12:06:48

解決方案2
0 2017-08-18 12:10:47

javascript加載並使用json數據文件

問題描述

A1

a2

data.json

2 個解決方案

解決方案1 1 已采納 2017-08-18 12:06:48

解決方案2 0 2017-08-18 12:10:47

解決方案1
1 已采納 2017-08-18 12:06:48

解決方案2
0 2017-08-18 12:10:47