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

Question

我正在尝试从 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);
    }

Answer 1

for(var x in key1){，此处 key1 未定义，您需要更正它。然后在 objArray 中，您需要保存所有键值对，仅推送其中的值将使以后使用变得困难。您可以将对象推送到 objArray 中，另外为什么要创建 selectList 然后将其附加到 optionSelect，您可以直接将选项附加到 optionSelect ，如下所示:

 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>