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>

my 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访问本地文件。

从JSON文件填充表单

1 个答案: