How to convert JSON to HTML Drop down menu

Question

This is my JSON Code

data = {
    "master_item":{
        "M5":{
            "PMBLT000164":"PMBLT000164"
        },
        "M8":{
            "PMBTN000020":"PMBTN000020"
        },
        "M165":{
            "PMBTN000003":"PMBTN000003","PMBTN000004":"PMBTN000004","PMBTN000006":"PMBTN000006","PMBTN000009":"PMBTN000009"
        }
    },
    "products":{
        "PMBTN000003":"PMBTN000003","PMBTN000002":"PMBTN000002"
    },
    "bulk":{
        "BBTPB000003":"BBTPB000003","BMBCT000002":"BMBCT000002"
    }
}

What I want this i have to convert this into three dropdown menu

<select name='master_item'>
 <optgroup label="M5">
<option value="PMBLT000164">PMBLT000164</option>
</optgroup>
</select>

Above HTML is based on json data.

EDIT:

I have tried following code in JQUERY

var options = $("#options");
    $.each(data.master_item, function(i,a) {
    options.append($("<option />").val(a).text(a));
});

@JosephtheDreamer Sorry i have added now.

KKK
– KKK

2012-09-13 11:22:58 +00:00
Commented Sep 13, 2012 at 11:22 — KKK
– KKK, Commented Sep 13, 2012 at 11:22
The same logic mentioned in this post should be applicable.

basiljames
– basiljames

2012-09-13 11:24:08 +00:00
Commented Sep 13, 2012 at 11:24 — basiljames
– basiljames, Commented Sep 13, 2012 at 11:24

VDP · Accepted Answer · 2012-09-13 11:54:27Z

1

I used a function check this fiddle. The advantage of this over the other solutions: data can contain as much nested levels as you want..

var options = $("<select/>"),
    addOptions = function(opts, container){
        $.each(opts, function(i, opt) {
            if(typeof(opt)=='string'){
                container.append($("<option />").val(opt).text(opt));
            } else {
                var optgr = $("<optgroup />").attr('label',i);
                addOptions(opt, optgr)
                container.append(optgr);
            }
        });
    };

addOptions(data,options); // or addOptions(data.master_item,options);
$('body').append(options);

edited Sep 13, 2012 at 11:54

answered Sep 13, 2012 at 11:37

VDP

6,4104 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

raina77ow · Accepted Answer · 2012-09-13 11:31:17Z

Well, I suppose it can be done with something like this:

var $select = $('<select>').attr({
    name: 'master_item'
});

$.each(data.master_item, function(optGroupLabel, options) {
    var $optGroup = $('<optgroup>').attr({
        label: optGroupLabel
    });
    $.each(options, function(optionKey, optionValue) {
        var $option = $('<option>').attr({
            value: optionValue
        }).text(optionValue);
        $optGroup.append($option);
    });
    $select.append($optGroup);
});

$('body').append($select);

Basically, it's a two-step process, and at each step we go deeper in the data structure. At the first level we process optgroup, at the second - options within each optgroup.

I have used hashes in .attr to simplify adding more attributes. Another important point is to append the whole structure to the DOM only after it will be completed.

Steven Hunt · Accepted Answer · 2012-09-13 11:36:34Z

0

I think you have the right idea, but I think you should just use a for loop:

fiddle: http://jsfiddle.net/stevenmtwhunt/ua7jw/

answered Sep 13, 2012 at 11:36

Steven Hunt

2,32119 silver badges20 bronze badges

1 Comment

mickmackusa Over a year ago

Please avoid posting link only answers. Your post will be more valuable if you copy your code directly into the answer body. 1. Researchers won't need to link chase. 2. Stackoverflow provides runnable snippet functionality for js. 3. If the external link is ever changed or removed, your answer will be worthless to researchers.

Collectives™ on Stack Overflow

How to convert JSON to HTML Drop down menu

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related