使用Vanilla JS和JSON文件填充選擇元素

Question

我正在嘗試使用來自外部json文件的數據填充select元素。

var dropDown = document.getElementById('dropdown');

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // success
    data = JSON.parse(request.responseText);
    console.log(data);

    for (var i = 0, len = data.length; i < len; i++) {
        alert('FOO');
        var data = data[i];
        dropDown.innerHTML(option.name);
    }
};

JSON

{
    "TopLevel": {
        "Second": [
            "data",
            "data",
            "data",
            "data"
        ],
        "Second": [
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            }
        ]
    },
    "TopLevel": {
        "Second": [
            "data",
            "data",
            "data",
            "data"
        ],
        "Second": [
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            }
        ]
    }
}

我已經可以使用上述方法成功返回數據，但是由於某些原因，我無法使循環運行並且不確定自己在做什么錯。

沒有控制台錯誤，我的警報也不會觸發...

Answer 1

向選項添加選項的最佳方法是根據W3schools Select add（）方法使用document.createElement("option") 。

 var json = { "data": ["orange", "banana", "apple", "pear"] }; var dropdown = document.getElementById("dropdown"); for (var i = 0; i < json.data.length; i++) { var option = document.createElement("option"); option.text = json.data[i]; option.value = json.data[i]; dropdown.add(option); } 

 <select id="dropdown"></select> 

Answer 2

您需要以這種方式編寫代碼。

數據正在返回object {}因此數據的長度undefined並且循環未運行。

您需要選擇將返回數組的特定數據。

例如： data.TopLevel.Second

 var data = { "TopLevel": { "Second": [ "data", "data", "data", "data" ], "Second": [{ "ThirdLabel": "data", "ThirdID": "data" }, { "ThirdLabel": "data", "ThirdID": "data" }, { "ThirdLabel": "data", "ThirdID": "data" } ] }, "TopLevel": { "Second": [ "data", "data", "data", "data" ], "Second": [{ "ThirdLabel": "data", "ThirdID": "data" }, { "ThirdLabel": "data", "ThirdID": "data" }, { "ThirdLabel": "data", "ThirdID": "data" } ] } } var dropDown = document.getElementById('dropdown'); debugger; var options = ""; for (var i = 0, len = data.TopLevel.Second.length; i < len; i++) { var item = data.TopLevel.Second[i]; options += "<option> " + item.ThirdID + "</option>" } document.getElementById("dropdown").innerHTML = options; 

 <select name="" id="dropdown"></select>