0

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"}]}

よろしくお願いします

4

1 に答える 1

0

コードにはいくつかの間違いがあり、以下のバージョンは機能します。

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によるローカルファイルへのアクセスを禁止します。

于 2012-11-11T15:36:46.083 に答える