create multiple selectboxes from json and with different levels

Question

I have a JSON string from which I want to create multiple selectboxes. The problem however is that one value is somewhere deeper hidden in the JSON file. Further the json file is created dynamically so everything should work dynamically.

So my question is how to create the selectboxes and how do I get the value which lays deeper in the JSON file into the same select box?

JSON

{

    "product": {
options": {

    "58395": {
        "id": 58395,
        "title": "Size",
        "values": {
            "220544": {
                "id": 220544,
                "title": "36",
                "active": true
            },
            "220545": {
                "id": 220545,
                "title": "37",
                "active": false
            },
            "220546": {
                "id": 220546,
                "title": "38",
                "active": false
            },
            "220547": {
                "id": 220547,
                "title": "39",
                "active": false
            }
        }
    },
    "61295": {
        "id": 61295,
        "title": "Color",
        "values": {
            "231911": {
                "id": 231911,
                "title": "Zwart",
                "active": true
            },
            "231912": {
                "id": 231912,
                "title": "Bruin",
                "active": false
            },
            "231913": {
                "id": 231913,
                "title": "Rood",
                "active": false
            }
        }
    },
    "61296": {
        "id": 61296,
        "title": "Fabric",
        "values": {
            "231914": {
                "id": 231914,
                "title": "1",
                "active": true
            },
            "231915": {
                "id": 231915,
                "title": "2",
                "active": false
            },
            "231916": {
                "id": 231916,
                "title": "3",
                "active": false
            }
        }
    }

}, // etc....

So what I try to do is create 3 selectboxes -> Size, color and fabric. Inside these selectboxes have to come the value title. So you get something like:

<option value=' + option.id + '>' + value.title + '</option>

So what I tried was this, which obviously doesn't work:

  $.getJSON(url, function (data){
    var $selectOptions = $('<select />');
    $.each(data.product.options, function (index, option){
        var ids = "";
        $.each(options.values, function (i, v) { ids += " " + v.id; });
        $selectOptions.append('<option value=' + option.id + '>' +option.value.title + ids + '</option>');
    }); //etcetc...

This generates just one selectbox with with all option names inside it. Instead of the value titles.

Can anybody help me with this. I really can't figure this one out.

Thanks!

Ulises Acosta · Accepted Answer · 2014-08-15 17:03:01Z

1

If i understand... you want to create 3 select boxed one for each option you have with the values as options...

why you dont try this

$.getJSON(url, function (data){
     var $selectOptions = $('<div />');
     $.each(data.product.options, function (index, option){
        var select = $('<select />');
        $.each(option.values, function (i, value) { 
            select.append('<option value=' + value.id + '>' + value.title + '</option>');
        });
        $selectOptions.append('<label>' + option.value + '</label>');
        $selectOptions.append(select);
}); //etcetc...

I hope this will help you maybe to modified at your taste...

answered Aug 15, 2014 at 17:03

Ulises Acosta

361 bronze badge

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

Comments

Ulises Acosta · Accepted Answer · 2014-08-15 17:06:09Z

1

Or maybe you want this

$.getJSON(url, function (data){
     var $selectOptions = $('<div />');
     $.each(data.product.options, function (index, option){
        var select = $('<select />');
        $.each(option.values, function (i, value) { 
            select.append('<option value=' + value.id + '>' + option.title + ': ' + value.title + '</option>');
        });
        $selectOptions.append(select);
}); //etcetc...

answered Aug 15, 2014 at 17:06

Ulises Acosta

361 bronze badge

Comments

3bh · Accepted Answer · 2014-08-15 18:53:29Z

1

You need to build one select for each member of the options array object. Replace your $.getJSON() callback with something like this:

var products_el = $('#products');
$.getJSON(url, function(product_data) {
    for(var product_id in product_data) {
        var product = product_data[product_id];
        var product_el = $('<div class="product"><h3>' + product_id + '</h3></div>').appendTo(products_el);
        product_el.attr('id',product_id);
        for(var select_id in product.options) {
            var select = product.options[select_id];
            var select_wrap = $('<p><b>' + select.title + ' </b></p>').appendTo(product_el);
            var select_el = $('<select name="' + select_id + '" id="select_' + select_id + '"/>').appendTo(select_wrap);
            for(var option_id in select.values) {
                var option = select.values[option_id];
                var option_el = $('<option value="' + option.id + '" ' + (option.active ? 'selected' : '') + '>' + option.title + '</option>').appendTo(select_el);
            }
        }
    }
})

JSFiddle: http://jsfiddle.net/4hr4tn3k/1/

edited Aug 15, 2014 at 18:53

answered Aug 15, 2014 at 17:21

3bh

8461 gold badge6 silver badges13 bronze badges

3 Comments

Meules Over a year ago

Thx but I need to use getJSON in order to get the json file.

3bh Over a year ago

Check the edit... you can replace the second argument with that function, either as an anonymous function (in the edit) or passed by variable as in the JSFiddle.

Meules Over a year ago

Ok thx but accepted answer is shorter and more readable for me :) Thx anyway

Collectives™ on Stack Overflow

create multiple selectboxes from json and with different levels

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related