从 JSON 文件填充表单

Question

我正在尝试使用 JSON 文件中的数据填充表单 (onClick)。 我可以从数组中成功完成，但是当我尝试解析本地（与 .html 相同的文件夹）JSON 文件时，它不起作用。

<script>
var marks = [];
$(document).ready(function() {
    $("#RQdata").click(function(event) {
        $.getJSON('test.json', function(data) {
            $.each(data.markers, function(key, val) {
                marks.push(val[key]);


            });
        });
    });
});

function populateList() {
    for (var i = 0; i < marks.length; i++) {
        var mark = new Option(marks[i].name, markers[i].latlng);
        document.getElementById('locationList').options.add(mark);
    }
}
</script>


<h2>List</h2>
<form name="aForm">
  <select name="locationList" id="locationList" size="6" onChange="alert(value);" style=" width:800px;owerflow: auto;">
  </select>
  <input type="button" id="RQdata" name="Request Data" value="Request Data" >
</form> 

我的 test.json

{"markers":
            [{"latlng":[55.587,17.044],"name":"Some name 1"},
            {"latlng":[55.577,17.044],"name":"Some name 2"},
            {"latlng":[55.507456,17.617585],"name":"Some name 3"},
            {"latlng":[55.25642,17.154904],"name":"Some name 4"},
            {"latlng":[55.103217,17.07776],"name":"Some name 5"}]}

最好的问候

Answer 1

你的代码有几个错误，下面的版本可以工作。

var marks = [];
$(document).ready(function() {
$("#RQdata").click(function(event) {
    $.getJSON('test.json', function(data) {
    $.each(data.markers, function(key, val) {
        marks.push(val);  //It should be val instead of val[key]
    });

    populateList();  // You didn't call this function here
    });
});
});

function populateList() {
for (var i = 0; i < marks.length; i++) {
    var mark = new Option(marks[i].name, marks[i].latlng);  //marks instead of markers here
    document.getElementById('locationList').options.add(mark);
}
}

请使用检查器或其他工具进行调试。

另外，正如@matt 在评论中提到的，某些浏览器（如 Chrome）将禁止 XHR 访问本地文件。