title: Create rows and append them 4 elements of an object inside an array
body: <p>I have this array:</p>
  <pre><code>let filtered = 
  0: {name: 'Rick Sanchez', status: 'Alive', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg'}
  1: {name: 'Morty Smith', status: 'Alive', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg'}
  2: {name: 'Summer Smith', status: 'Alive', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/3.jpeg'}
  3: {name: 'Beth Smith', status: 'Alive', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/4.jpeg'}
  4: {name: 'Jerry Smith', status: 'Alive', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/5.jpeg'}
  5: {name: 'Abadango Cluster Princess', status: 'Alive', species: 'Alien', image: 'https://rickandmortyapi.com/api/character/avatar/6.jpeg'}
  6: {name: 'Abradolf Lincler', status: 'unknown', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/7.jpeg'}
  7: {name: 'Adjudicator Rick', status: 'Dead', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/8.jpeg'}
  8: {name: 'Agency Director', status: 'Dead', species: 'Human', image: 'https://rickandmortyapi.com/api/character/avatar/9.jpeg'}
  </code></pre>
  <p>I have more elements inside the array, but I want to put the info in cards (I'm using bootsrap 5 btw) but each 4 cards have to be inside a row and then I have to create a new row to put append them the next 4 cards</p>
  <p>With map I can load the characters card but, how to append then each 4 cards in a new row??
  Basically the structure should be</p>
  <pre><code>div.row
    div.col
    div.col
    div.col
    div.col
  div.row
    div.col
    div.col
    div.col
    div.col
  </code></pre>
  <p>Should I use a for loop?? It could work but I'm not sure if it is the best solution, with .map I have no idea how to properly make a row each 4 elements</p>
  <p>Im using only vanilla js</p>
  <p><strong>Edit:</strong>
  I'm working in a website to load the characthers of rick and morty in cards with a click button</p>
  <p>Initially my code was:</p>
  <pre><code>const url = &quot;https://rickandmortyapi.com/api/character&quot;;
  const button = document.querySelector(&quot;#button-app&quot;)
  const app = document.querySelector(&quot;#app&quot;) 
  
  async function execute() {
    await createRow()
    await fetchAPI()
  }
  
  async function createRow(){
    const newRow = document.createElement(&quot;div&quot;);
    newRow.classList = &quot;row&quot;
    console.log(&quot;add&quot;)
    app.appendChild(newRow)
  }
  
  button.addEventListener(&quot;click&quot;, execute, false)
  
  async function fetchAPI() {
    const response = await fetch(url)
    const results = await response.json()
    const data = results.results
  
  
    data.map((result) =&gt; {
      const col = document.createElement(&quot;div&quot;)
      col.classList= &quot;col-12 col-sm-4 col-lg-3&quot;
      col.id = &quot;col&quot;
      col.innerHTML = characters(result)
      app.appendChild(col) 
      console.log(index) 
    })
  }
  function characters(character) {
    return`
    &lt;div class=&quot;card&quot;&gt;
      &lt;img class=&quot;card-img-top&quot; src=&quot;${character.image}&quot; alt=&quot;&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;h5 class=&quot;card-title&quot;&gt;${character.name}&lt;/h5&gt;
        &lt;span class=&quot;badge bg-success&quot;&gt;${character.status}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    `
  }
  </code></pre>
  <p>it worked to laod the cards but, I didnt have the idea yet to load the rows, so I decided to recreate the code
  const url = &quot;https://rickandmortyapi.com/api/character&quot;;
  const app = document.querySelector(&quot;#app&quot;)</p>
  <pre><code>async function fetchAPI() {
    const response = await fetch(url)
    const results = await response.json()
    const data = results.results
    //data is an array
    const info = data.map(({name, status, image})=&gt; (name, status, image))
    //map transform, filteredData contains the filteredArray
    let filteredData = data.map(({name, status, species, image}) =&gt; ({name,status,species, image}))
    console.log(filteredData)
  }
  //bring the data
  async function createCards() {
    filteredData.map(result, index) =&gt; {
      if (index = 0 || (index + 1) % 4 === 0){
        const newRow = document.createElement(&quot;div&quot;);
        newRow.classList = &quot;row&quot;
        app.appendChild(newRow)
      }
    }
  }
  </code></pre>
  <p>(app is a div with the class container where the js will work)
  I'm thinking that now working with newRow I could load and append there the cards, but... Im not sure if is still the best solution</p>