loop through json data for creating dropdown list

Question

i have json data with two type of values. in first only one element will get inserted into dropdown list and in other multiple items can be inserted into dropdown list

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);
}

My questions :

if there is only one element in json nested list why cant i retrieve it by using array index[0] ?
My for loop code works for data1 but not for data as data contains only one element
how can i write only one piece of code which will crate drop down list irrespective of nested element in json

Fiddle : http://jsfiddle.net/E7zhK/3/

T.J. Crowder · Accepted Answer · 2014-06-28 09:33:17Z

1) if there is only one element in json nested list why cant i retrieve it by using array index[0] ?

Because there is no property on that object with the name "0".

2) My for loop code works for data1 but not for data as data contains only one element

3) How can i write only one piece of code which will crate drop down list irrespective of nested element in json

Well, I would fix it at the source. It shouldn't matter whether it's returning one or several, it should return a consistent data structure.

But if you can't rely on that, you have to check whether you're getting back an array or not:

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

Then you can act accordingly. One simple answer is to make it an array:

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);
}

Alternately, factor out the body of your for loop (in this case it's a one-liner, but in the general case it might not be) and then reuse it as appropriate:

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>";
}

hari · Accepted Answer · 2014-06-28 09:40:32Z

1

your first data syntax missing,

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

Demo

answered Jun 28, 2014 at 9:40

hari

1,9831 gold badge16 silver badges10 bronze badges

Comments

hex494D49 · Accepted Answer · 2014-06-28 09:42:42Z

1

If you change your first data object to this

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

than your snippet would work fine for both situation; which means that your current objects have different structure. Your BILLER of object data is not a proper array so you can't access things by index.

answered Jun 28, 2014 at 9:42

hex494D49

9,2453 gold badges41 silver badges50 bronze badges

Collectives™ on Stack Overflow

loop through json data for creating dropdown list

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related