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

each（）回调函数有两个参数：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 2

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

PS：如果你使用console.log(value);

，你可以自己做

Answer 3

为了使它更加模块化并且涉及更少的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数组，该数组填充标记名为option的jQuery对象，然后将其放在select标记中。这是一个demo

哦，在我忘记之前，each按行进行迭代。因此，在each的任何迭代中，您将获得一行数据。例如，

如果key === 2，则value === { "UNIT_NM": "DALLAS", "UNIT_CD": "D00" }

因此，访问UNIT_NM＆amp; UNIT_CD，您必须使用value.UNIT_NM＆amp;分别为value.UNIT_CD。有关each的详细信息，请参阅docs。

希望有所帮助！

如何在jQuery中迭代HashMap列表

3 个答案: