Question

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

我进行了相当彻底的搜索，无法找到我想要的内容。我在我的HTML中有一系列下拉选择框，目前没有任何内容。

updated_at

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

<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循环，但我不确定应该连接什么或者首先将它连接到什么或如何连接。我比较新。建议非常感谢。

Answer 1

演示：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 2

我的建议是：

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

并为城市选择

做同样的事情

将对象键值附加到<li>

4 个答案: