javascripthtmlinsertadjacenthtml

How can I render html with insertAdjacentHTML


How can I render components with pure javascript? I used insertAdjacentHTML and forEach to render a list with objects but the objects appeared undefined.

object list

const liRender = document.getElementById('ul-component')

function render() {

itens.forEach(() => {
    liRender.insertAdjacentHTML("afterbegin",
 ` <li class="products-list__item">
    <div class="products-list__item-thumbnail">
      <img
        class="product__thumbnail"
        src=${itens.img}>
        <div class="products-list__item-main-content">
        <h4 class="product__name">
          ${itens.modelo}
        </h4>
        <p class="product__description">
          ${itens.description}
        </p>
        <div class="products-list__item-action-buttons">
        <button class="button" data-open-modal="1">Detalhes</button>
        </div>
    </div>
  </li>
`

    )
})
}

export function Component() {
render()
}

result list return undefined


Solution

  • Your forEach needs iten passed within it. Like the following,

    itens.forEach((iten) => {

    Then you refer to each property like so,

    
    <p class="product__description">
      ${iten.description}
    </p>
    

    const liRender = document.getElementById('ul-component')
    const itens = [{
        modelo: 'test',
      description: 'description',
      img: 'image'
    },
    {
        modelo: 'test 2',
      description: 'description 2',
      img: 'image'
    },
    {
        modelo: 'test 3',
      description: 'description 3',
      img: 'image'
    }];
    
    function render() {
    
      itens.forEach((iten) => {
        liRender.insertAdjacentHTML("afterbegin",
          ` <li class="products-list__item">
        <div class="products-list__item-thumbnail">
          <img
            class="product__thumbnail"
            src=${iten.img}>
            <div class="products-list__item-main-content">
            <h4 class="product__name">
              ${iten.modelo}
            </h4>
            <p class="product__description">
              ${iten.description}
            </p>
            <div class="products-list__item-action-buttons">
            <button class="button" data-open-modal="1">Detalhes</button>
            </div>
        </div>
      </li>
    `
    
        )
      })
    }
    
    
    render();
    <ul id='ul-component'>
    
    </ul>