Javascript 将对象键值附加到<；李>；

更新：我用类编辑了li's，使其更容易理解和理解

我做了一次相当彻底的搜索，没有找到我要找的东西。我的HTML中有一系列下拉选择框，当前没有填充任何内容

<li class="games-owned">
    <div class="input-field col s6">
        <select>
            <option value="" disabled selected>What Game Do You Want To Trade?</option>
        </select>
    </div>
</li>
<li class="games-wanted">
    <div class="input-field col s6">
        <select>
            <option value="" disabled selected>What Game Would You Like To Have?</option>
        </select>
    </div>
</li>
<li class="city">
    <div class="input-field col s12">
        <select>
            <option value="" disabled selected>What City Do You Live In?</option>
        </select>
    </div>
</li>

具体来说，前两名李需要从“游戏”中挑选，最后一名李需要从“城市”中挑选。显然，这三种方法的过程大致相同

我尝试过使用for循环，但我不确定应该连接什么，或者首先连接什么或如何连接它。我比较新。非常感谢您的建议。

演示：

为您的选择添加一个ID以便您可以访问它们，执行标准for循环以遍历数据集，使用

innerHTML

将

附加到每个数据集

var want = document.getElementById('want');
for(var i=mockData.profile.length; i--;)
    want.innerHTML += "<option>"+mockData.profile[i].gameWanted+"</option>";

var want=document.getElementById（'want'）；
对于（var i=mockData.profile.length；i--；）
want.innerHTML+=“”+mockData.profile[i].gamewant+“”；

演示：

为您的选择添加一个ID以便您可以访问它们，执行标准for循环以遍历数据集，使用

innerHTML

将

附加到每个数据集

var want = document.getElementById('want');
for(var i=mockData.profile.length; i--;)
    want.innerHTML += "<option>"+mockData.profile[i].gameWanted+"</option>";

var want=document.getElementById（'want'）；
对于（var i=mockData.profile.length；i--；）
want.innerHTML+=“”+mockData.profile[i].gamewant+“”；

我的建议是：

var mockData={
“简介”：[{
“姓名”：“马里奥”，
“城市”：“洛杉矶”，
“州”：“加利福尼亚州”，
“游戏所有”：“侠盗猎车手5（PS4）”，
“通缉犯”：“战场4（PS4）”，
“发布日期”：新日期（）
}, {
“姓名”：“科林”，
“城市”：“洛杉矶”，
“州”：“加利福尼亚州”，
“玩家所有”：“战场4（PS4）”，
“通缉犯”：“侠盗猎车手5（PS4）”，
“发布日期”：新日期（）
}],
“城市”：[“洛杉矶”、“纽约”]，
“游戏”：[“战场4（PS4）”，“侠盗猎车手5（PS4）”]
}
window.addEventListener（'DOMContentLoaded'，函数（e）{
mockData.game.forEach（函数（值、索引）{
document.querySelectorAll（'li:n个子（1）select'）[0]。innerHTML+=''+value+''；
document.querySelectorAll（'li:n个子（2）select'）[0]。innerHTML+=''+value+''；
});
mockData.city.forEach（函数（值、索引）{
document.querySelectorAll（'li:n子（3）select'）[0].innerHTML+=''+value+''；
});
});

你想交易什么游戏？


你想玩什么游戏？


你住在哪个城市？
我的建议是：


var mockData={
“简介”：[{
“姓名”：“马里奥”，
“城市”：“洛杉矶”，
“州”：“加利福尼亚州”，
“游戏所有”：“侠盗猎车手5（PS4）”，
“通缉犯”：“战场4（PS4）”，
“发布日期”：新日期（）
}, {
“姓名”：“科林”，
“城市”：“洛杉矶”，
“州”：“加利福尼亚州”，
“玩家所有”：“战场4（PS4）”，
“通缉犯”：“侠盗猎车手5（PS4）”，
“发布日期”：新日期（）
}],
“城市”：[“洛杉矶”、“纽约”]，
“游戏”：[“战场4（PS4）”，“侠盗猎车手5（PS4）”]
}
window.addEventListener（'DOMContentLoaded'，函数（e）{
mockData.game.forEach（函数（值、索引）{
document.querySelectorAll（'li:n个子（1）select'）[0]。innerHTML+=''+value+''；
document.querySelectorAll（'li:n个子（2）select'）[0]。innerHTML+=''+value+''；
});
mockData.city.forEach（函数（值、索引）{
document.querySelectorAll（'li:n子（3）select'）[0].innerHTML+=''+value+''；
});
});

你想交易什么游戏？


你想玩什么游戏？


你住在哪个城市？
首先，我将为不同的select元素提供类

<li>
    <div class="input-field col s6">
        <select class="select-game">
            <option value="" disabled selected>What Game Do You Want To Trade?</option>
        </select>
    </div>
</li>
<li>
    <div class="input-field col s6">
        <select class="select-game">
            <option value="" disabled selected>What Game Would You Like To Have?</option>
        </select>
    </div>
</li>
<li>
    <div class="input-field col s12">
        <select class="select-city">
            <option value="" disabled selected>What City Do You Live In?</option>
        </select>
    </div>
</li>


你想交易什么游戏？


你想玩什么游戏？


你住在哪个城市？


然后将json映射到选项元素-

var gameSelects = document.querySelectorAll('.select-game');

for (var i=0; i<gameSelects.length; i++) {
    mockData.game.map(function(game) {
        var option = document.createElement("OPTION");
        var textnode = document.createTextNode(game);
        option.appendChild(textnode);
        gameSelects[i].appendChild(option);
    })
}

var gameSelects=document.querySelectorAll（'.select game'）；
对于（var i=0；i首先，我将为不同的select元素提供类

<li>
    <div class="input-field col s6">
        <select class="select-game">
            <option value="" disabled selected>What Game Do You Want To Trade?</option>
        </select>
    </div>
</li>
<li>
    <div class="input-field col s6">
        <select class="select-game">
            <option value="" disabled selected>What Game Would You Like To Have?</option>
        </select>
    </div>
</li>
<li>
    <div class="input-field col s12">
        <select class="select-city">
            <option value="" disabled selected>What City Do You Live In?</option>
        </select>
    </div>
</li>


你想交易什么游戏？


你想玩什么游戏？


你住在哪个城市？


然后将json映射到选项元素-

var gameSelects = document.querySelectorAll('.select-game');

for (var i=0; i<gameSelects.length; i++) {
    mockData.game.map(function(game) {
        var option = document.createElement("OPTION");
        var textnode = document.createTextNode(game);
        option.appendChild(textnode);
        gameSelects[i].appendChild(option);
    })
}

var gameSelects=document.querySelectorAll（'.select game'）；
对于（var i=0；i，我可能建议修改您的配置文件数据结构：

"profile": [{
    "name": "Mario",
    "city": "Los Angeles",
    "state": "California",
    "game": {"owned":["Grand Theft Auto 5 (PS4)"],
             "wanted":["Battlefield 4 (PS4)"]},
    "publishedAt": new Date()
}


var mockData={
“简介”：[{
“姓名”：“马里奥”，
“城市”：“洛杉矶”，
“州”：“加利福尼亚州”，
“游戏所有”：“侠盗猎车手5（PS4）”，
“通缉犯”：“战场4（PS4）”，
“发布日期”：新日期（）
}, {
“姓名”：“科林”，
“城市”：“洛杉矶”，
“州”：“加利福尼亚州”，
“玩家所有”：“战场4（PS4）”，
“通缉犯”：“侠盗猎车手5（PS4）”，
“发布日期”：新日期（）
}],
“城市”：[“洛杉矶”、“纽约”]，
“游戏”：[“战场4（PS4）”，“侠盗猎车手5（PS4）”]
}
//数据中具有关联select的属性名称
变量字段=[“城市”、“游戏”]；
函数init（）{
//对于每个属性
fields.forEach（字段=>{
//查找具有以字段名开头的类的列表项的所有子项
document.querySelectorAll（'li[class^='+field+']select'）.forEach（select=>{
//为字段中的每个元素添加新选项
mockData[field].forEach（文本=>select.appendChild（新选项（文本）））
});
});
}
document.addEventListener（“DOMContentLoaded”，init，false）；