javascript - 使用 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>`
};

function createOptions(option) {
    var select = document.getElementById("property");
    return option.map(item => {
        return select.options[select.options.length] = new Option(item, item)
    })
}

这是我得到的输出

我不知道如何在此代码中使用 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>