从JSON对象创建选择表单属性

时间:2017-08-02 12:29:12

标签: javascript json

我正在尝试从我的json对象中的键和值构建一个选择下拉列表但是我无法将键值对组合在一起我只能成功获取键名本身。以下是我迄今为止所能完成的工作。

这就是我想要选择的选项:

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

我是否需要创建另一个数组来保存每个键的值,然后在构建选择选项时进行相应的引用,还是有其他方法或方法?

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

3 个答案:

答案 0 :(得分:1)

sum,key1在此处未定义,您需要更正它。然后在你的objArray中你需要保存所有的键值对,只推动它中的值将使得以后使用它变得困难。您可以在tapply中推送对象,还有为什么要创建selectList然后将其附加到optionSelect,您可以直接将选项附加到optionSelect,如下所示:

&#13;
&#13;
r1 <- unname(tapply(w, rep(seq_along(v), v), FUN = sum))
i1 <- which(v==0)-1
for(i in seq_along(i1)) r1 <- append(r1, 0, after = i1[i])
r1
#[1] 2.951259 0.000000 2.982644 4.233564 0.000000 0.000000
&#13;
for(var x in key1){
&#13;
&#13;
&#13;

答案 1 :(得分:0)

只需迭代原始对象值,然后遍历每个值的键

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

参考:

答案 2 :(得分:0)

只是更优雅,也许,这样说道:)

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