Create select form attribute from JSON object

Question

I am trying to build a select dropdown from the key and values in my json object but I am not able to get the key value pairs together I have been only successful at getting the key names themselves. Below is what I have been able to complete so far.

This is how I would like the select options to look:

 <select id="optSelect">
    <option value="key1">value1</option> <!-- should come from name1 -->
    <option value="key1">value2</option> <!-- should come from name2 -->
 </select>

Do I need to make another array to hold the value of each key and then reference accordingly when I build my select options or is there another way or method?

    var someObject = {
        "Name1": {
            "key1": "value1",
        },
        "Name2": {
            "key1": "value2",
        }
    }


    var objArray = [];

    for(var i in someObject){
        var key = someObject[i];
        for(var x in key1){
            var nextKey = x;
            var nextVal = key1[x];
            someObject.push(nextKey);
        }
    }

    var optionSelect = document.getElementById("optSelect"),
        selectList = document.createElement("select");

    selectList.id = "mySelect";
    optionSelect.appendChild(selectList);

    for (var i = 0; i < objArray.length; i++) {
        var option = document.createElement("option");
        option.value = objArray[i]; // need to get key1 in here for each value in someObject
        option.text = objArray[i]; // need to get value 1 or 2 etc in here for each value name in someObject
        selectList.appendChild(option);
    }

i saw this var key = someObject[i]; change for this var key1 = someObject[i]; — Álvaro Touzón
– Álvaro Touzón, Commented Aug 2, 2017 at 12:31
you also push your results to the same array than the source: maybe someObject.push(nextKey); should be objArray.push(nextKey);, to go further: objArray[nextKey] = nextVal; — Kaddath
– Kaddath, Commented Aug 2, 2017 at 12:33
Can you show an example of how you'd like the <select> and <option> elements to look? It's unclear from your code what should be set for the value and text content — Phil
– Phil, Commented Aug 2, 2017 at 12:33
What's the point in having identical <option> element values? — Phil
– Phil, Commented Aug 2, 2017 at 12:38

Dij · Accepted Answer · 2017-08-02 12:46:47Z

for(var x in key1){, key1 is undefined here, you need to correct that. Then in your objArray you need to save all key value pairs, pushing just the values in it will make using it later difficult. you can push objects in objArray, Also why are you creating selectList and then appending it to optionSelect, you can just directly append your options to optionSelect something like this:

 var someObject = {
        "Name1": {
            "key1": "value1",
        },
        "Name2": {
            "key1": "value2",
        }
    }


    var objArray = [];

    for(var i in someObject){
        var key1 = someObject[i];
        for(var x in key1){
            objArray.push({'key' : x, 'val' : key1[x]});
        }
    }

    var optionSelect = document.getElementById("optSelect"),
        selectList = document.createElement("select");

    selectList.id = "mySelect";
    optionSelect.appendChild(selectList);

    for (var i = 0; i < objArray.length; i++) {
        var option = document.createElement("option");
        
        option.value = objArray[i].key; // need to get key1 in here for each value in someObject
        option.text = objArray[i].val; // need to get value 1 or 2 etc in here for each value name in someObject
        optionSelect.appendChild(option);
    }

<select id="optSelect">

 </select>

Phil · Accepted Answer · 2017-08-02 12:49:47Z

0

Just iterate over the original object values, then the keys of each value

Object.values(someObject).forEach(entry => {
  Object.keys(entry).forEach(key => {
    let option = document.createElement('option')
    option.value = key
    option.text = entry[key]
    selectList.appendChild(option)
  })
})

Reference:

edited Aug 2, 2017 at 12:49

answered Aug 2, 2017 at 12:32

Phil

166k25 gold badges265 silver badges269 bronze badges

Comments

bluehipy · Accepted Answer · 2017-08-02 12:55:48Z

0

Just a more elegant, maybe, way to put it :)

var values = Object.values,
  keys = Object.keys,
  s = document.createElement('select'),
  someObject = {
    "Name1": {
      "key1": "value1",
    },
    "Name2": {
      "key1": "value2",
    }
  };

values(someObject).forEach((o) => {
  var opt = document.createElement('option');
  opt.setAttribute('value', keys(o)[0]);
  opt.innerHTML = values(o)[0];
  s.appendChild(opt);
});

document.body.appendChild(s);

answered Aug 2, 2017 at 12:55

bluehipy

2,2941 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Create select form attribute from JSON object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related