CODEWITHSUNDEEP
javascriptarrays
user10295435
user10295435

Reputation:

Displaying each array item in a different div

I have an array containing 4 items, and I want each of these items to display in its own div.

<div id="chord-box"></div>
<div id="chord-box"></div>
<div id="chord-box"></div>
<div id="chord-box"></div>

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBox = document.getElementById('chord-box');

How do I get each array item to display in it's own div?

Upvotes: 0

Views: 2014

Answers (5)

Hassan Khan
Hassan Khan

Reputation: 126

I've changed id with class, to put each value of an array into a corresponding div, you can use JavaScript to loop through the array and assign each value to the innerText property of its corresponding div.

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBoxes = document.querySelectorAll(".chord-box");

// for loop
for (let i = 0; i < chordsArray.length; i++) {
  chordBoxes[i].innerText = chordsArray[i];
}

// forEach loop
chordsArray.forEach((value, index) => {
  chordBoxes[index].innerText = value;
});
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>

Upvotes: 0

g4k13
g4k13

Reputation: 31

Good question. You could try something like this by looping through your chord array and generating HTML from it. 

const html = ['C', 'Dm', 'Em', 'F'].map(chord => {return `<div id='${chord}'>${chord}</div> `}).join('')
const chordsContainer = document.getElementById("chords-container");
chordsContainer.innerHTML += html

To break it down:

  1. Create a array ['C', 'Dm', 'Em', 'F']
  2. Iterate through each chord using map naming each item as it comes out chord
  3. Generate the html by returning each time <div id='${chord}'>${chord}</div>
  4. Join the Array in a string of HTML .join('')
  5. Finally, add the newly generated html to the chordsContainer

Read more on map -> Javascript Array.map() on Mozilla MDN

Upvotes: 0

Pepe Lucho
Pepe Lucho

Reputation: 129

you could use this code that generates the boxes dynamically

var chordsArray = ['C', 'Dm', 'Em', 'F'];
var bodyElement = document.getElementsByTagName("body")[0];


for(var i = 0; i < chordBox.length; i++) {
    var chordBox = document.createElement("div");
    chordBox.className = "chord-box";
    chordBox.innerHTML = chordsArray[i];
    bodyElement.appendChild(chordBox);
}

In this case, I add the boxes into the body element.

Upvotes: 0

Derek Pollard
Derek Pollard

Reputation: 7165

A quick and dirty way of doing this:

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBox = document.getElementsByClassName('chord-box');

for(let i = 0; i < chordBox.length; i++) {
  chordBox[i].innerText = chordsArray[i];
}
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>

Thoughts

Notice that I changed the id to class; the id attribute should only ever exist on 1 element at a time. It is an identifier, whereas, class represents a group, or class of elements.

This example assumes that you're going to have an equal number of divs as you have elements in the array; this is a very naive way of thinking, the divs should probably be put in as you need them: 

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordsContainer = document.getElementById("chords-container");

for(let i = 0; i < chordsArray.length; i++) {
  chordsContainer.innerHTML += '<div>' + chordsArray[i] + '</div>';
}
<div id="chords-container"></div>

Hope this helps!

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15831

Another way is to create elements on runtime with the great advantage: you do not need divs to be present (and in a finite number) in your scaffolding, their number will depend on the number of your chords.

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const container = document.getElementById('container');

for(let i=0; i < chordsArray.length; i += 1){
  let chord = document.createElement('div');
  chord.innerHTML = chordsArray[i];
  container.appendChild(chord);
}
<div id="container"></div>

Upvotes: 1

Related Questions