populate multiple select boxes with single json string

Question

I have string of data coming to the page via ajax. in the following format

[{"servername":"svrA"},{"servername":"svrB"},{"servername":"svrC"},{"location":"locA"},{"location":"locB"},{"location":"locC"}]

I'd like to populate two select boxes with the data.

I've tried different variations of the following pseudo code:

for each item in the json string
if obj == servername
   add to selectbox Server
if obj == location
   add to selectbox Location

Any ideas would be greatly appreciated. Thanks.

Hi Trevor3.0, Could you please post the last version of the code you've tried please. — NicoArbogast
– NicoArbogast, Commented Aug 25, 2013 at 20:59
First, post your actual code - pseudocode doesn't help at all, and second, you need to say what's not working as opposed to "any ideas would be appreciated" — Bojangles
– Bojangles, Commented Aug 25, 2013 at 21:01
@Trevor3.0 Indeed, edit requested information into the existing question — Richard Tingle
– Richard Tingle, Commented Aug 29, 2013 at 11:27

Christian · Accepted Answer · 2013-08-25 21:23:07Z

1

var stuff = [{"servername":"svrA"},{"servername":"svrB"},{"servername":"svrC"},{"location":"locA"},{"location":"locB"},{"location":"locC"}];

var elems = {
    "servername": jQuery('#select-server'),
    "location": jQuery('#select-location')
};

stuff.forEach(function(item){
    for(var selectName in elems){
        if(typeof item[selectName] != 'undefined'){
            var val = item[selectName];
            elems[selectName].append(jQuery('<option/>').val(val).html(val));
        }
    }
});

Not that forEach is not available on older browsers. The code above is just a sample for you to work with.

edited Aug 25, 2013 at 21:23

answered Aug 25, 2013 at 21:05

Christian

28.3k18 gold badges117 silver badges162 bronze badges

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

Comments

plalx · Accepted Answer · 2013-08-25 21:32:17Z

There are several ways to do this and depending on how your code might evolve in the future, some solutions might be slightly better than others or more flexible, but since I do not have such knowledge, here's an example on how you could do it in vanilla JS.

JSFIDDLE

var data = [
        {"servername":"svrA"},
        {"servername":"svrB"},
        {"servername":"svrC"},
        {"location":"locA"},
        {"location":"locB"},
        {"location":"locC"}
    ],
    selects = {
        servername: document.getElementById('servername'),
        location: document.getElementById('location')
    }, 
    i = 0,
    len = data.length,
    item, prop, val;

for (; i < len; i++) {
    prop = 'servername' in (item = data[i])? 'servername' : 'location';
    val = item[prop];
    selects[prop].add(new Option(val, val), null);
}

If you plan having the same kind of data structure for multiple select boxes, instead of hardcoding the selects object that references the select elements, you could also have pulled the select id dynamically using for in and also resolve the select reference using a generic approach.

Collectives™ on Stack Overflow

populate multiple select boxes with single json string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related