I have this array:
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'}
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
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
div.row
div.col
div.col
div.col
div.col
div.row
div.col
div.col
div.col
div.col
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
Im using only vanilla js