CODEWITHSUNDEEP
javascriptarrays
Jonny
Jonny

Reputation: 1329

combining 2 arrays to make objects of the combination with javascript

function fillBoxes() {
  var s = ['data1', 'data2', 'data3'];
  var v = ['box1', 'box2', 'box3'];
  var lengtha = s.length;
  var lengthb = v.length;
  
  if (lengtha > lengthb) {
    console.log("not enough objects to contain data.");
  } else {
    var resp = [];
    var respb = [];
    
    for (var i = 0; i < s.length; i++) {
      resp.push(s[i]);
    }
    
    for (var j = 0; j < v.length; j++) {
      respb.push(document.getElementById(v[j]).innerHTML = resp);
    }
    
    console.log(respb);
  }
}
.testToggle {
  background-color: green;
  width: 100px;
  height: 100px;
  float: left;
  display: none;
}

.pressme {
  width: 200px;
  height: 50px;
  float: left;
  background-color: gray;
}

.gen {
  width: 200px;
  height: 200px;
  float: left;
  border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>

The result I get each container has the array in it. How can I split the array up so that box1 has only data1, box2 has only data2, and box3 has only data3 instead of box1 having data1,data2, and data3.

and please no jquery.

Upvotes: 1

Views: 48

Answers (3)

Jonathan Tiritilli
Jonathan Tiritilli

Reputation: 61

Not 100% sure what you're looking to do, except maybe add text to the dom. Try not to set innerHTML. This can be a source of vulnerability in some instances.

function fillBoxes(){
  const ids = ['box1','box2','box3'];
  const data = ['data1','data2','data3'];
  if (ids.length !== data.length) {
    console.log("not enough objects to contain data.");
  } else {
    for (let i = 0; i < ids.length; i++) {
      let el = document.getElementById(ids[i]);
      let content = document.createTextNode(data[i]);
      el.appendChild(content);
    }
  }
}

Upvotes: 0

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use index while assigning with document.getById for below line

respb.push(document.getElementById(v[j]).innerHTML = resp[j]);

working code for refernce:

function fillBoxes() {
  var s = ['data1', 'data2', 'data3'];
  var v = ['box1', 'box2', 'box3'];
  var lengtha = s.length;
  var lengthb = v.length;
  
  if (lengtha > lengthb) {
    console.log("not enough objects to contain data.");
  } else {
    var resp = [];
    var respb = [];
    
    for (var i = 0; i < s.length; i++) {
      resp.push(s[i]);
    }
    
    for (var j = 0; j < v.length; j++) {
      respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
    }
    
    console.log(respb);
  }
}
.testToggle {
  background-color: green;
  width: 100px;
  height: 100px;
  float: left;
  display: none;
}

.pressme {
  width: 200px;
  height: 50px;
  float: left;
  background-color: gray;
}

.gen {
  width: 200px;
  height: 200px;
  float: left;
  border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>

codepen- https://codepen.io/nagasai/pen/zYOPYzx

Upvotes: 1

Taki
Taki

Reputation: 17654

you already have the array, just add the index : 

.innerHTML = resp[j]
                 ^^^


function fillBoxes() {
  var s = ['data1', 'data2', 'data3'];
  var v = ['box1', 'box2', 'box3'];
  var lengtha = s.length;
  var lengthb = v.length;
  if (lengtha > lengthb) {
    console.log("not enough objects to contain data.");
  } else {
    var resp = [];
    var respb = [];
    for (var i = 0; i < s.length; i++) {
      resp.push(s[i]);
    }
    for (var j = 0; j < v.length; j++) {
      respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
    }
  }
}
.testToggle {
  background-color: green;
  width: 100px;
  height: 100px;
  float: left;
  display: none;
}

.pressme {
  width: 200px;
  height: 50px;
  float: left;
  background-color: gray;
}

.gen {
  width: 200px;
  height: 200px;
  float: left;
  border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>

Upvotes: 1

Related Questions