Colin Aulds Colin Aulds - 2 months ago 11
HTML Question

Appending object key values to <li>

Update: I edited the li's with classes to make it easier to understand and grab.

I did a fairly thorough search and could not find exactly what I was looking for. I have in my HTML a series of drop-down select boxes, currently populated with nothing.

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


I need to populate them with the contents of a key value pair from my main.js mockData, here:

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)"]
}


specifically the first two li's need to cull from "game" and the final li needs to cull from "city". Obviously, the process will be roughly the same for all three.

I've tried using a for loop but I'm not sure what should be connecting or what or how to get it connected in the first place. I'm relatively new. Suggestions much appreciated.

Answer

My proposal is:

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>