3

次のJSONデータがあり、そこからhtml select要素を入力したいのですが、このようなjsonデータでforeachループを使用する方法がわかりません。ありがとう。

// JSON

[{
    "group": "US (Common)",
    "zones": [{
        "value": "America/Puerto_Rico",
        "name": "Puerto Rico (Atlantic)"
    }, {
        "value": "Pacific/Honolulu",
        "name": "Honolulu (Hawaii)"
    }]
}, {
    "group": "Africa",
    "zones": [{
        "value": "Africa/Tunis",
        "name": "Tunis"
    }, {
        "value": "Africa/Windhoek",
        "name": "Windhoek"
    }]
}]

html select要素は次のようになります：

<select id="timeZones"></select>

これは機能していないJSコードです：

var $select = $('#timeZones');
$.ajax({
    url: 'timezones.json',
    dataType: 'JSON',
    success: function (data) {
        $.each(data, function (i, val) {
            $select.append('<OPTGROUP LABEL="' + val[i].group + '"><OPTION VALUE="' + val[i].zone[i].value + '">' + val[i].zone[i].name + '</OPTION></OPTGROUP>');
        })
    },
    error: function () {
        alert("JSON ERROR");
    }
});
4

3 に答える 3

2

ネストされたノードで各関数を 2 つ実行する方が簡単です

 success: function (data) {
    $.each(data, function (i, val) {
        bar = '<OPTGROUP LABEL="' + val.group + '">';      
        $.each(val.zones, function(zoneID,zoneData) {
            bar += '<OPTION VALUE="' + zoneData.value + '">' + zoneData.name + '</OPTION>';  
        });
        bar += '</OPTGROUP>';
        $('#timeZones').append(bar);
   });    

}

これは、実用的なソリューションのjsfiddleですhttp://jsfiddle.net/hZsQS/132/

ただし、テンプレート化のために jsrender のようなものを見たいと思うかもしれません

于 2012-10-31T17:59:20.877 に答える
0

ネストされた$.eachループが必要になるようです。1つはグループをループして追加し<optgroup>、内側のループはゾーンをループしてそれぞれ<option>を適切なに追加します<optgroup>。

于 2012-10-31T16:48:16.293 に答える
0

Knockout Framework を使用して、json 文字列を選択ボックスにマップできます (非常に少ないコード)。

例: JavaScript:

var json = '{"showFilter":["notStarted","running"],"whatEver":["one","two"]}';
  var model = ko.mapping.fromJSON(json);
  ko.applyBindings(model);

HTML:

<p>Filter: <select data-bind="options: showFilter"></select></p>
<p>WhatEver: <select data-bind="options: whatEver"></select></p>

参照: http://knockoutjs.com/documentation/options-binding.html

于 2012-10-31T17:47:07.100 に答える