Trying to iterate through an object and append resutls to DOM element to create a grid-CodePudding

I have a webpage I am trying to build. I want to create a grid of images and titles that render dynamically with javascript. I have an array of objects in my file that have a image src and title.

I want to iterate through the the array of objects and then have each item render within the grid by appending to the parent div.

What is happening is that it is only showing the last item in the object and there is an issue with the image url that is loading with the titls. It is currently only showing one image.

I need help figuring this out.

Here is the JS moments array:

const moments = [
    {
        image: "./inages/pexels-ali-pazani-2613260.jpg",
        title: "WIDE BRIM HAT"
    },
    {
        image: "./inages/pexels-jonas-togo-3072141.jpg",
        title: "OSCAR WILDE"
    },
    {
        image: "./inages/pexels-simon-robben-977796.jpg",
        title: "LOOK! A BIRD"
    },
    {
        image: "./inages/pexels-kira-schwarz-9169378.jpg",
        title: "BUBBLES!"
    },
    {
        image: "./inages/pexels-maksim-goncharenok-5046542.jpg",
        title: "CHAMPAGNE POPPY"
    },
    {
        image: "./inages/pexels-eberhard-grossgasteiger-4406335.jpg",
        title: "ERUPTION"
    },
    {
        image: "./inages/pexels-suliman-sallehi-1484771.jpg",
        title: "BOND. JAMES BOND"
    },
    {
        image: "./inages/pexels-nataliya-vaitkevich-5712923.jpg",
        title: "1327 STEPS"
    },
    {
        image: "./inages/pexels-a-koolshooter-5601107.jpg",
        title: "DIOR"
    },
]

I have a function that will run and create the structure that I want to generate as a final result.

This is the final result that I want...

    <div class="featured-item">
        <img class="featured-image" src="./inages/pexels-jonas-togo-3072141.jpg"/>
        <p class="featured-title">OSCAR WILDE</p>
    </div>
    <div class="featured-item">
        <img class="featured-image" src="./inages/pexels-simon-robben-977796.jpg"/>
        <p class="featured-title">LOOK! A BIRD</p>
    </div>
    <div class="featured-item">
        <img class="featured-image" src="./inages/pexels-kira-schwarz-9169378.jpg"/>
        <p class="featured-title">BUBBLES!</p>
    </div>
    <div class="featured-item">
        <img class="featured-image" src="./inages/pexels-maksim-goncharenok-5046542.jpg"/>
        <p class="featured-title">CHAMPAGNE POPPY</p>
    </div>

This is the function that I have

let featuredMomentsDiv = document.getElementById('featured-grid')
function CreateFeaturedGridItem(){
    let newFeaturedDiv = document.createElement('div')
    let newFeaturedImage = document.createElement('img')
    let newFeaturedTitle = document.createElement('p')

    newFeaturedDiv.classList.add('featured-item')
    newFeaturedImage.classList.add('featured-image')
    newFeaturedTitle.classList.add('featured-title')

    for(let i = 0; i < moments.length; i  ){

        let currentImage = moments[i]['image']
        let currentTitle = moments[i]['title']

        newFeaturedImage.src = currentImage
        newFeaturedTitle.innerHTML = currentTitle
        newFeaturedDiv.appendChild(newFeaturedImage)
        newFeaturedDiv.appendChild(newFeaturedTitle)

        // I want to append each div structure to the parent element
        // the parent element is featuredMomentsDiv
        featuredMomentsDiv.append(newFeaturedDiv)
    }
    
}
CreateFeaturedGridItem();

I want each structure to build and append to the div featuredMomentsDiv. This is what is currently printing when I run the code:

enter image description here

CodePudding user response：

You can map through the array, construct the corresponding string with the properties insert at the right positions, then join the result:

const moments=[{image:"./inages/pexels-ali-pazani-2613260.jpg",title:"WIDE BRIM HAT"},{image:"./inages/pexels-jonas-togo-3072141.jpg",title:"OSCAR WILDE"},{image:"./inages/pexels-simon-robben-977796.jpg",title:"LOOK! A BIRD"},{image:"./inages/pexels-kira-schwarz-9169378.jpg",title:"BUBBLES!"},{image:"./inages/pexels-maksim-goncharenok-5046542.jpg",title:"CHAMPAGNE POPPY"},{image:"./inages/pexels-eberhard-grossgasteiger-4406335.jpg",title:"ERUPTION"},{image:"./inages/pexels-suliman-sallehi-1484771.jpg",title:"BOND. JAMES BOND"},{image:"./inages/pexels-nataliya-vaitkevich-5712923.jpg",title:"1327 STEPS"},{image:"./inages/pexels-a-koolshooter-5601107.jpg",title:"DIOR"}];

const HTML = moments.map(e => `<div class="featured-item"><img class="featured-image" src="${e.image}"/><p class="featured-title">${e.title}</p></div>`).join('')

document.write(HTML)

If the image and title properties contain HTML which you would like to escape, you can construct the elements and set their src and textContent:

const moments=[{image:"./inages/pexels-ali-pazani-2613260.jpg",title:"WIDE BRIM HAT"},{image:"./inages/pexels-jonas-togo-3072141.jpg",title:"OSCAR WILDE"},{image:"./inages/pexels-simon-robben-977796.jpg",title:"LOOK! A BIRD"},{image:"./inages/pexels-kira-schwarz-9169378.jpg",title:"BUBBLES!"},{image:"./inages/pexels-maksim-goncharenok-5046542.jpg",title:"CHAMPAGNE POPPY"},{image:"./inages/pexels-eberhard-grossgasteiger-4406335.jpg",title:"ERUPTION"},{image:"./inages/pexels-suliman-sallehi-1484771.jpg",title:"BOND. JAMES BOND"},{image:"./inages/pexels-nataliya-vaitkevich-5712923.jpg",title:"1327 STEPS"},{image:"./inages/pexels-a-koolshooter-5601107.jpg",title:"DIOR"}];

const container = document.getElementById("featured-grid")

moments.forEach(e => {
  const item = document.createElement('div')
  const img = document.createElement('img')
  const paragraph = document.createElement('p')
  img.classList.add('featured-image')
  paragraph.classList.add('featured-title');
  img.src = e.image;
  paragraph.textContent = e.title;
  item.appendChild(img)
  item.appendChild(paragraph)
  container.appendChild(item);
})

<div id="featured-grid" class="featured-grid"></div>

CodePudding user response：

You have to create a new element for every loop cycle.

let featuredMomentsDiv = document.getElementById('featured-grid')
function CreateFeaturedGridItem(){


  for(let i = 0; i < moments.length; i  ){
    let newFeaturedDiv = document.createElement('div')
    let newFeaturedImage = document.createElement('img')
    let newFeaturedTitle = document.createElement('p')

    newFeaturedDiv.classList.add('featured-item')
    newFeaturedImage.classList.add('featured-image')
    newFeaturedTitle.classList.add('featured-title')

    let currentImage = moments[i]['image']
    let currentTitle = moments[i]['title']

    newFeaturedImage.src = currentImage
    newFeaturedTitle.innerHTML = currentTitle
    newFeaturedDiv.appendChild(newFeaturedImage)
    newFeaturedDiv.appendChild(newFeaturedTitle)

    // I want to append each div structure to the parent element
    // the parent element is featuredMomentsDiv
    featuredMomentsDiv.append(newFeaturedDiv)
  }
}