1

Ajax 呼び出しの結果である JSON 配列を要素にバインドしようとしてい<select/>ます。

JSON 構造のサンプルを以下に示します。

[{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}]

私が達成する必要があるのは、各要素のJD_No値とJD_Name値を抽出し、それらをhtmlにバインドすることです<select/>

また、JSON キーは動的であるため、特定のキー名を参照することはできません。

何か助けてください。

4

6 に答える 6

3

jQueryでは、これを行うことができます：

値がタイプ番号であるかどうかを確認できます。そうでない場合は名前です。

JSFiddleここ

var jsonString = '[{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}]';

var json_data = JSON.parse(jsonString);

for(var i = 0; i < json_data.length; i++){

    var option = $("<option>");

    for( var key in json_data[i] ){
        // There should only be two keys, if its a number its ID, else option name
        if( typeof json_data[i][key] === "number" ){
            option.attr("value", json_data[i][key]);
        }else{
            option.html(json_data[i][key]);
        }
    }

    $("select").append(option);

}
于 2013-09-13T06:36:42.600 に答える
2

これを試してくださいhttp://jsfiddle.net/SPMJz/

HTML

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

Javascript

window.onload = function(){
    var data = [
        {"JD_No":1,"JD_Name":"Network Administrator"},
        {"JD_No":2,"JD_Name":"System Administrator"}
    ];

    populateSelect(data, 'number', 'string');
}

function populateSelect(data, idType, nameType){
    if(!data || !data[0]){
        return;
    }

    var select  = document.getElementById('select');
    var keys    = Object.keys(data[0]);
    var idKey   = typeof(parseInt(keys[0])) == idType   ? keys[0] : keys[1];
    var nameKey = typeof(parseInt(keys[0])) == nameType ? keys[0] : keys[1];

    for(var i = 0; i < data.length; i++){
        var option = document.createElement('option');
        option.value = data[i][idKey];
        option.label = data[i][nameKey];
        select.appendChild(option);
    }
}
于 2013-09-13T07:02:43.200 に答える
1

オプションの値属性は常に数値であるという前提に基づいています。

var json = [{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}];

var options = [], key, value;

json.forEach(function(obj) {
    Object.keys(obj).forEach(function(k) {
        if(typeof obj[k] === "number") {
            key = obj[k];
        }
        else {
            value = obj[k];
        }
    });
    options.push({'key': key, 'value': value}); //or append it directly to select
});

options.forEach(function(option) {
    var option = $('<option>').attr('value', this.key).html(this.value);
    $('#slt').append(option);
});

jsFiddle デモ

jQuery ソリューション:

$.each(json, function() {
    $.each(this, function(k, v) {
        if(typeof v === 'number') {
            key = v;
        }
        else {
            value = v;
        }
    });
    options.push({'key': key, 'value': value}); ////or append it directly to select
});


$.each(options, function() {
    var option = $('<option>').attr('value', this.key).html(this.value);
    $('#slt').append(option);
});
于 2013-09-13T06:52:33.267 に答える
1

私の理解が正しければ、動的プロパティを選択にバインドしますか? オブジェクトのリストが常に特定の順序で特定の量のプロパティと共に返されると想定できる場合は、INDEX に基づいてプロパティにアクセスできます。

次の例では、オブジェクトからキーと値を取得します。

for (var i in myArray) {
    var obj = myArray[i];
    var index = 0;
    var key, val;
    for (var prop in obj) {
        switch (index++) {
            case 0:
                key = obj[prop];
                break;
            case 1:
                val = obj[prop];
                break;
            default:
                break;
        }
    }
    $("select").append("<option value=\"" + key + "\">" + val + "</option>");
}
于 2013-09-13T06:41:08.937 に答える
0

jsonそれが問題のオブジェクトの配列であると考えてください。配列を繰り返し、各 を収集し、必要に応じてobjにアクセスしkeysます。要素を生成data-し、keys in the array.

$.each(json, function(i, obj){
    $('body').append('<select data-no="'+obj.JD_No+'" data-name="'+obj.JD_Name+'"></select>');
});
于 2013-09-13T06:32:17.573 に答える
0

jsonArrayjson データにすると、次のコードを使用してデータをselect要素にバインドできます

$.each(jsonArray, function (index, item) {
                 $('#ddl').append($('<option></option>').val(item.JD_No).html(item.JD_Name));
             });
于 2013-09-13T06:34:16.237 に答える