Insert multiple values from array into mulitple divs in HTML-CodePudding

I am trying to insert values from an array into HTML. The value from the array includes image and alt.

The HTML includes multiple sections like this code below:

<!--section-->
<div >
  <div id="firstThumbnail" >
    <a>
      <img src="###########">
      <div >
        <p id="captionStyle">NR1 Here should be the alt</p>
      </div>
    </a>
  </div>
</div>
<!--section-->

<!--section-->
<div >
  <div id="firstThumbnail" >
    <a>
      <img src="###########">
      <div >
        <p id="captionStyle">NR2 Here should be the alt</p>
      </div>
    </a>
  </div>
</div>
<!--section-->

And the array looks like this:

const imagesArr = [{
  image: 'src nr1',
  alt: 'THIS TITLE SHOULD BE INSERTED TO id="captionStyle"',
},
{
  image: 'src nr2',
  alt: 'THIS TITLE SHOULD BE INSERTED TO id="captionStyle"',
} ];

What is the best way to pull the data when I have multiple items and multiple sections in HTML?

I'll try it on my own but I'd be glad for any help!

CodePudding user response：

Although this will be much easier if you used any of the main frontend framework such as Angular, React, Vue, but as you're doing it in plain JavaScript, you could do something like this.

const imagesArr = [{
  image: 'src nr1',
  alt: 'THIS TITLE SHOULD BE INSERTED TO id="captionStyle"',
},
{
  image: 'src nr2',
  alt: 'THIS TITLE SHOULD BE INSERTED TO id="captionStyle"',
} ];

const htmlElements = [];

imagesArr.forEach(image => {
let container = document.createElement('div');
  container.setAttribute('class', 'd-xl-none');
  let thumbnail = document.createElement('div');
  thumbnail.setAttribute('class', 'mobileGallery thumbnail d-flex justify-content-center imagePreview');
  let anchor = document.createElement('a');
  let img = document.createElement('img');
  img.setAttribute('src', image.image);
  let captionContainer = document.createElement('div');
  captionContainer.setAttribute('class', 'caption');
  let caption = document.createElement('p');
  caption.setAttribute('class', 'captionStyle');
  caption.append(image.alt);
  
  captionContainer.append(caption);
  anchor.append(img, captionContainer);
  thumbnail.append(anchor);
  container.append(thumbnail);
  htmlElements.push(container);
});

const parentContainer = document.querySelector('.parent-container');
parentContainer.append(...htmlElements);

<div ></div>

CodePudding user response：

Loop through the sections and use the idx to grab the values from the array:

const imagesArr = [{
  image: 'https://placekitten.com/200/200',
  alt: 'THIS TITLE SHOULD BE INSERTED TO id="captionStyle"',
},
{
  image: 'https://placekitten.com/200/300',
  alt: 'THIS TITLE SHOULD BE INSERTED TO id="captionStyle"',
} ];

const sections = document.querySelectorAll(".d-xl-none")

sections.forEach((el,idx) => 
{
  el.querySelector("img").src = imagesArr[idx].image
  el.querySelector(".caption p").innerHTML = imagesArr[idx].alt
})

<!--section-->
<div >
  <div id="firstThumbnail" >
    <a>
      <img src="###########">
      <div >
        <p id="captionStyle">NR1 Here should be the alt</p>
      </div>
    </a>
  </div>
</div>
<!--section-->

<!--section-->
<div >
  <div id="firstThumbnail" >
    <a>
      <img src="###########">
      <div >
        <p id="captionStyle">NR2 Here should be the alt</p>
      </div>
    </a>
  </div>
</div>
<!--section-->