将对象键值附加到<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 mockData中的键值对的内容来填充它们，如下所示：

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>附加到每个选择。

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>

​