Trying to make divs inside divs with a loop

user_10175433 0
Viewed 52

I'm trying to make div's with a loop and my data and in this divs i would like to make at the same time some other div's i tryed something but i think this is the wrong way to do it it would be great if someone could show me a example to make something like this so that in the end it should look like this:

                        <div class="col-3 vehicleholder" id="THE ID">
                            <div class="vehicle-icon">
                                <i class="fas fa-car"></i> <-- The Icon
                            </div>
                            <div class="vehicle-information">
                                <div class="car-name">THE VEH MODEL</div>
                                <div class="numberplates">THE PLATENUMBERS</div>
                            </div>
                        </div>

      let app = JSON.parse(parkedvehicle);
      const vehiclelist = document.querySelector('div.row vehicles')
      for (i = 0; i < app.length; i++) {
          let vehicleholder = document.createElement('div');
          vehicleholder.classList.add('col-3', 'vehicleholder');

          let id = app[i].id;
          vehicleholder.setAttribute('id', id);
          
          const vehicleinfo = document.querySelector('div.col-3 vehicleholder')
          let vehicleicondiv = document.createElement('div');
          vehicleicondiv.classList.add('vehicle-icon');

          const vehicleinfoicon = document.querySelector('div.vehicle-icon');
          let vehicleicon = document.createElement('i');
          vehicleicon.classList.add('fas', 'fa-car');

          //

          const vehicleinfotext = document.querySelector('div.col-3 vehicleholder')
          let vehicleicondiv2 = document.createElement('div');
          vehicleicondiv2.classList.add('vehicle-information');

          const vehicletext = document.querySelector('div.vehicle-information')
          let vehicleicondiv3 = document.createElement('div');
          vehicleicondiv3.classList.add('car-name');
          vehicleicondiv3.innerHTML = app[i].vehmodel;

          const vehicletext2 = document.querySelector('div.vehicle-icon');
          let text = document.createElement('div');
          text.classList.add('numberplates');
          text.innerHTML = app[i].numberplates;

          vehiclelist.appendChild(vehicleholder);
          vehicleinfo.appendChild(vehicleicondiv);
          vehicleinfoicon.appendChild(vehicleicon);
          vehicleinfotext.appendChild(vehicleicondiv2);
          vehicletext.appendChild(vehicleicondiv3);
          vehicletext2.appendChild(text);
html javascript
2 Answers

Simplest way is to use template literals

For example (this goes in the for loop)

const HtmlCode = 
`<div class="col-3 vehicleholder" id="${app[i].id}">
  <div class="vehicle-icon">
    <i class="fas fa-car"></i>
  </div>
  <div class="vehicle-information">
    <div class="car-name">${app[i].VEH}</div>
    <div class="numberplates">${app[i].plateNumbers}</div>
  </div>
</div>`;

vehiclelist.innerHTML += HtmlCode;
user_140143220

So the easiest way to do so its to create a wrapper.

<div id="wrapper"></div>

then to use for loop and insert the HTML that way:

let wrapper = document.getElementById('wrapper')
let app = JSON.parse(parkedvehicle);

for (let car of app){
wrapper.innerHTML += `
<div class="col-3 vehicleholder" id="${car.id}">
  <div class="vehicle-icon">
    <i class="fas fa-car"></i>
   </div>
   <div class="vehicle-information">
     <div class="car-name">${car.vehmodel}</div>
     <div class="numberplates">${car.numberplates}</div>
   </div>
 </div>
`
}

so what i did, inside the wrapper innerHTML i used `` (template literals) so i can write HTML, any javascript i want to implement i wrapped in ${} and all of this inside the for loop. notice that i wrote: wrapper.innerHTML += so it can add the code block again and again.

this is a codepen for example: https://codepen.io/Elnatan/pen/eYZYZey

hope it helped you.

user_127409670
Related