通过json数据循环创建下拉列表

loop through json data for creating dropdown list

本文关键字：创建 下拉列表 循环 数据 json 通过      更新时间：2023-09-26

我有json数据与两种类型的值。首先，下拉列表中只能插入一个元素，而在其他情况下，下拉列表中可以插入多个元素

JS: 

var data = 
    {
    "GETBILLERRESPONSE":
    {
        "RESPONSECODE":"0","RESPONSEMESSAGE":"Success","BILLERS":
        {
            "BILLER":{
                "@ID":"6","@EIDENFORCED":"FALSE","@ISGETBALANCE":"TRUE","#text":"POP CORN MANIA","SERVICES":null
            }
        }
    }
};
var data1 = {
    "GETBILLERRESPONSE":
    {
        "RESPONSECODE":"0","RESPONSEMESSAGE":"Success","BILLERS":
        {
            "BILLER":
            [
                {
                    "@ID":"1","@EIDENFORCED":"TRUE","@ISGETBALANCE":"TRUE","#text":"Mumbai Bill Payment","SERVICES":{
                        "SERVICE":
                        [
                            {
                                "@ID":"1","#text":"Bill Payment"
                            },
                            {
                                "@ID":"2","#text":"Fine Payment"
                            }
                        ]
                    }
                },
                {
                    "@ID":"7","@EIDENFORCED":"FALSE","@ISGETBALANCE":"TRUE","#text":"Delhi Bill Payment","SERVICES":null
                },
                {
                    "@ID":"23","@EIDENFORCED":"FALSE","@ISGETBALANCE":"TRUE","#text":"Chennai Bill Payment","SERVICES":null
                }
            ]
        }
    }
};
var ResponseMessage = data1.GETBILLERRESPONSE.RESPONSEMESSAGE;
if (ResponseMessage == "Success")
{
    var k=0;
    var Html = "<option value='"-1'">" + "Please select a payee." + "</option>";    
    var lenforbillers = data1.GETBILLERRESPONSE.BILLERS.BILLER.length;    
    var objforbillers = data1.GETBILLERRESPONSE.BILLERS.BILLER;
    for (k = 0; k < lenforbillers; k++)
    {
        Html += "<option value='"" + (objforbillers[k]['@ID']) + "'">" + (objforbillers[k]['#text']) + "</option>";         
    }
    $("#dlInstantPayPayeee").html(Html);
}

我的问题:

  1. 如果json嵌套列表中只有一个元素，为什么我不能使用数组索引[0]检索它?
  2. 我的for循环代码适用于data1，但不适用data，因为data只包含一个元素
  3. 我怎么能只写一段代码，这将创建下拉列表，而不管json中的嵌套元素

小提琴:http://jsfiddle.net/E7zhK/3/

1)如果json嵌套列表中只有一个元素，为什么我不能通过使用数组索引[0]检索它?

因为在那个对象上没有名为"0"的属性。

我的for循环代码适用于data1，但不适用于data，因为data只包含一个元素

3)我怎么能只写一段代码，这将创建下拉列表，而不管json中的嵌套元素

嗯，我会在源头修复它。返回一个还是几个并不重要，它应该返回一个一致的数据结构。

但是如果你不能依赖它，你必须检查你是否返回一个数组:

if ($.isArray(data1.GETBILLERRESPONSE.BILLERS.BILLER) {
    // It's an array
}
else {
    // It's not
}

然后你可以采取相应的行动。一个简单的答案是使它成为一个数组:

if (ResponseMessage == "Success")
{
    var k=0;
    var Html = "<option value='"-1'">" + "Please select a payee." + "</option>";    
    var objforbillers = data1.GETBILLERRESPONSE.BILLERS.BILLER;
    if (!$.isArray(objforbillers)) {          // <== New
        objforbillers = [objforbillers];      // <== New
    }                                         // <== New
    var lenforbillers = objforbillers.length; // <== Moved and modified
    for (k = 0; k < lenforbillers; k++)
    {
        Html += "<option value='"" + (objforbillers[k]['@ID']) + "'">" + (objforbillers[k]['#text']) + "</option>";         
    }
    $("#dlInstantPayPayeee").html(Html);
}

或者，将for循环的主体提取出来(在本例中它是一行代码，但一般情况下可能不是)，然后在适当的时候重用它:

if (ResponseMessage == "Success")
{
    var k=0;
    var Html = "<option value='"-1'">" + "Please select a payee." + "</option>";    
    var objforbillers = data1.GETBILLERRESPONSE.BILLERS.BILLER;
    var lenforbillers;
    if ($.isArray(objforbillers)) {
        lenforbillers = objforbillers.length;
        for (k = 0; k < lenforbillers; k++)
        {
            Html += optionHtml(objforbillers[k]); 
        }
    }
    else {
        Html += optionHtml(objforbillers);
    }
    $("#dlInstantPayPayeee").html(Html);
}
function optionHtml(entry) {
    return "<option value='"" + entry['@ID'] + "'">" + entry['#text'] + "</option>";
}

你的第一个数据语法缺失，

        "BILLER":
        [
            {
               "@ID":"6","@EIDENFORCED":"FALSE","@ISGETBALANCE":"TRUE","#text":"POP CORN MANIA","SERVICES":null
            }
        ]
演示

如果您将第一个data对象更改为

var data = {
    "GETBILLERRESPONSE": {
        "RESPONSECODE":"0","RESPONSEMESSAGE":"Success","BILLERS": {
            "BILLER": [ {
                "@ID":"6","@EIDENFORCED":"FALSE","@ISGETBALANCE":"TRUE","#text":"POP CORN MANIA","SERVICES":null
             } ]
        }
    }
};

可以很好地处理这两种情况;这意味着你当前的对象有不同的结构。对象data的BILLER不是一个正确的数组，所以你不能通过索引访问东西。

相关文章：