使用 json 数组中的 javascript 在 html 中呈现动态选择选项

Question

我有一个这样的对象var Blocks = {    "name": "Column",    "properties": [        {        "name": "mainAxisAlignment",        "type":"dropDown",        "values":[            "center",            "end",            "spaceAround",            "spaceBetween",            "spaceEvenly",            "start"            ]        },        {        "name": "crossAxisAlignment",            "type":"dropDown",        "values":[            "baseline",            "center",            "end",            "start",            "stretch"            ]        },        {            "name":"direction",            "type": "string"        },        {            "name":"hashCode",            "type": "string"        },        {            "name":"key",            "type": "string"        },        {        "name": "mainAxisSize",                "type":"dropDown",        "values":[            "max",            "min"            ]        },        {            "name":"textBaseline",            "type": "string"        },    ],}我正在尝试以 html 形式呈现。到目前为止，我能够获取标签和选择列表，但无法获取选择列表中的选项，这是我到目前为止所尝试的。document.getElementById('test1').innerHTML = `<div><div>${Blocks.name}</div><div id='selection'></div></div>`document.getElementById('selection').innerHTML = Blocks.properties.map(user => {    switch (user.type) {        case 'dropDown':            return propertyDropdown(user)        case 'string':            return propertyString(user)        default:            break;    }}).join('')function propertyString(data) {    return `<div style="margin-left: 18px">                <label>${data.name}: </label>            </div>`};function propertyDropdown(data) {    return `<div style="margin-left: 18px">                <label for="property">${data.name}: </label>                <select id="property">                </select>            </div>`};这是我得到的输出https://i.stack.imgur.com/EwU6R.png 我不知道如何createOptions在这段代码中使用函数。

Answer 1

您的id属性将导致错误，因为您为每个下拉列表分配相同的ID。在这种情况下，您可以使用name属性作为 ID。

var Blocks={name:"Column",properties:[{name:"mainAxisAlignment",type:"dropDown",values:["center","end","spaceAround","spaceBetween","spaceEvenly","start"]},{name:"crossAxisAlignment",type:"dropDown",values:["baseline","center","end","start","stretch"]},{name:"direction",type:"string"},{name:"hashCode",type:"string"},{name:"key",type:"string"},{name:"mainAxisSize",type:"dropDown",values:["max","min"]},{name:"textBaseline",type:"string"}]};

document.getElementById('test1').innerHTML = `<div>

<div>${Blocks.name}</div>

<div id='selection'></div>

</div>`

document.getElementById('selection').innerHTML = Blocks.properties.map(user => {

    switch (user.type) {

        case 'dropDown':

            return propertyDropdown(user)

        case 'string':

            return propertyString(user)

        default:

            break;

    }

}).join('')

function propertyString(data) {

    return `<div style="margin-left: 18px">

                <label>${data.name}: </label>

            </div>`

};

function propertyDropdown(data) {

    

    const options = data.values.map(opt => createOptions(opt)).join('')

    return `<div style="margin-left: 18px">

                <label for="${data.name}">${data.name}: </label>

                <select id="${data.name}">

                  ${options}

                </select>

            </div>`

};

function createOptions(option) {

    return `<option value="${option}">${option}</option>`

}

<div id="test1"></div>

Answer 2

您可以使用如下循环：

for (key in data.values) {
        output += '<option>' + data.values[key] + '</option>';
    }

示例： https: //jsfiddle.net/commanddotcom/j7f4y0kw/2/