Как перечислить список HashMap в jQuery

Question

У меня есть требование, когда я получаю список HashMap из запроса базы данных, и я должен отображать его на JSP.

объект JSON выглядит, как показано ниже:

[ 
    {"UNIT_NM":"ATLANTA", "UNIT_CD":"A00"}, 
    {"UNIT_NM":"ATLANTA CKO","UNIT_CD":"A00"}, 
    {"UNIT_NM":"DALLAS",  "UNIT_CD":"D00"}, 
    {"UNIT_NM":"DALLAS CKO", "UNIT_CD":"D00"} 
] 

Я, чтобы отобразить его в раскрывающемся меню, как:

"<option value='A00'> A00 ATLANTA</option>"; 
"<option value='A00'> A00 ATLANTA CKO</option>"; 
"<option value='D00'> D00 DALLAS</option>"; 
"<option value='D00'> D00 DALLAS CKO</option>"; 

Код JS является:

$.ajax({ 
     url:indexContextRoot+"populateManualCsoCodes", 
     type:"post", 
     async:true, 
     success: function(data){ 
     var listItems= "<option value=''>Please Select</option>"; 
     $.each(data, function(key, value) { 
        listItems+= "<option value='" + key + "'>" + value + "</option>"; 
     }); 
      $("#manualCsoCodes").html(listItems); 
     } 
    }); 

Я получение раскрывающегося списка как:

[object][Object] 
[object][Object] 
[object][Object] 
[object][Object] 

Любые предложения, пожалуйста!

Answer 1

Чтобы сделать это немного более модульным и включают меньший HTML, вот мое взятие на этом:

var data = [ 
    { 
    "UNIT_NM": "ATLANTA", 
    "UNIT_CD": "A00" 
    }, 
    { 
    "UNIT_NM": "ATLANTA CKO", 
    "UNIT_CD": "A00" 
    }, 
    { 
    "UNIT_NM": "DALLAS", 
    "UNIT_CD": "D00" 
    }, 
    { 
    "UNIT_NM": "DALLAS CKO", 
    "UNIT_CD": "D00" 
    } 
]; 


//init first option 
var $option = $("<option/>", { 
    "value": '', 
    "html": "Please Select" 
}); 

//add that to an array 
var options = [$option]; 

//iterate over data 
$.each(data, function (key, value) { 
    // value now contains a row eg., when key = 0, value = { "UNIT_NM": "ATLANTA", "UNIT_CD": "A00" } 

    //clone the default option, change the value and the HTML, then push into options array 
    options.push($option.clone().val(value.UNIT_CD).html(value.UNIT_CD + " " + value.UNIT_NM)); 
}); 

//add that array into select 
$("#manualCsoCodes").html(options); 

идея заключается в том, чтобы создать options массив, который заполняет с объектами JQuery с именем тега option, а затем поместить что в select тег. Вот demo

О, прежде чем я забуду, each повторяет ряд-мудрый. Итак, на любой итерации each вы получите ряд данных. Например,

если key === 2, то value === { "UNIT_NM": "DALLAS", "UNIT_CD": "D00" }

Таким образом, чтобы получить доступ к UNIT_NM & UNIT_CD, вы должны будете использовать value.UNIT_NM & value.UNIT_CD соответственно. Для получения дополнительной информации о each, см. docs.

Надеюсь, что это поможет!

Answer 2

Каждая функция обратного вызова имеет два параметра: 1) индекс элемента массива и 2) элемент массива. Таким образом, key будет 0, 1, 2 и т. Д., А value будет объектом js в этой позиции индекса. Так что вам нужно сделать:

$.each(data, function(key, obj) { 
     var str = obj["UNIT_CD"]; 
     listItems+= "<option value='" + str + "'>" + str + " " + obj["UNIT_NM"] + "</option>"; 
     }); 

Answer 3

listItems+= "<option value='" + value.UNIT_CD + "'>" + value.UNIT_CD + " " + value.UNIT_NM + "</option>"; 

PS: вы можете сделать это самостоятельно, если вы использовали console.log(value);