将对象键值附加到 <li>

Question

更新：我用类编辑了 li，使其更容易理解和抓取。

我进行了相当彻底的搜索，但找不到我要找的确切内容。我的 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>

我需要用我的 main.js 模拟数据中的键值对的内容填充它们，这里：

var mockData = {
"profile": [{
    "name": "Mario",
    "city": "Los Angeles",
    "state": "California",
    "gameOwned": "Grand Theft Auto 5 (PS4)",
    "gameWanted": "Battlefield 4 (PS4)",
    "publishedAt": new Date()
}, {
    "name": "Colin",
    "city": "Los Angeles",
    "state": "California",
    "gameOwned": "Battlefield 4 (PS4)",
    "gameWanted": "Grand Theft Auto 5 (PS4)",
    "publishedAt": new Date()
}],
"city": ["Los Angeles", "New York"],
    "game": ["Battlefield 4 (PS4)", "Grand Theft Auto 5 (PS4)"]
}

特别是前两个li需要从“game”中剔除，最后一个li需要从“city”中剔除。显然，这三个过程大致相同。

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

Answer 1

我的建议是：

var mockData = {
  "profile": [{
    "name": "Mario",
    "city": "Los Angeles",
    "state": "California",
    "gameOwned": "Grand Theft Auto 5 (PS4)",
    "gameWanted": "Battlefield 4 (PS4)",
    "publishedAt": new Date()
  }, {
    "name": "Colin",
    "city": "Los Angeles",
    "state": "California",
    "gameOwned": "Battlefield 4 (PS4)",
    "gameWanted": "Grand Theft Auto 5 (PS4)",
    "publishedAt": new Date()
  }],
  "city": ["Los Angeles", "New York"],
  "game": ["Battlefield 4 (PS4)", "Grand Theft Auto 5 (PS4)"]
}

window.addEventListener('DOMContentLoaded', function(e) {
 mockData.game.forEach(function(value, index) {
    document.querySelectorAll('li:nth-child(1) select')[0].innerHTML += '<option value="' + value + '">' + value + '</option>';
    document.querySelectorAll('li:nth-child(2) select')[0].innerHTML += '<option value="' + value + '">' + value + '</option>';
 });
 mockData.city.forEach(function(value, index) {
    document.querySelectorAll('li:nth-child(3) select')[0].innerHTML += '<option value="' + value + '">' + value + '</option>';
  });
});

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

Answer 2

演示：https://jsfiddle.net/fvxm0tvd/

为您的选择添加一个 ID，以便您可以访问它们，执行标准 for 循环以遍历数据集，使用 innerHTML 将 <option>s 附加到每个。

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

Answer 3

我可能会建议修改您的个人资料数据结构：

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

var mockData = {
"profile": [{
    "name": "Mario",
    "city": "Los Angeles",
    "state": "California",
    "gameOwned": "Grand Theft Auto 5 (PS4)",
    "gameWanted": "Battlefield 4 (PS4)",
    "publishedAt": new Date()
}, {
    "name": "Colin",
    "city": "Los Angeles",
    "state": "California",
    "gameOwned": "Battlefield 4 (PS4)",
    "gameWanted": "Grand Theft Auto 5 (PS4)",
    "publishedAt": new Date()
}],
"city": ["Los Angeles", "New York"],
    "game": ["Battlefield 4 (PS4)", "Grand Theft Auto 5 (PS4)"]
}

// The property names in the data that have associated select(s)
var fields = [ "city", "game" ];

function init() {
    // For each property
    fields.forEach( field => {
        // Find all the selects that are children of a list item with a class that starts with the field name
        document.querySelectorAll('li[class^='+field+'] select').forEach( select => {
            // Add a new option for every element in the field
            mockData[field].forEach( text => select.appendChild(new Option(text)))
        });
    });
}

document.addEventListener( "DOMContentLoaded", init, false );

<body>
<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>
</body>

Answer 4

首先我会为不同的选择元素上课

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

对城市选择做同样的事情