0
190
Viewsbucle javascript que envuelve cada 4 elementos en un padre
Tengo un objeto JSON que se parece a este,
const siteMapItems = [ { section: "Facts", pages: [ { label: '1', link: '#' }, ] }, { section: "Play", pages: [ { label: '1', link: '#' }, ] }, { section: "About", pages: [ { label: '1', link: '#' }, ] }, { section: "Mission", pages: [ { label: '1', link: '#' }, ] }, { section: "Contact", pages: [ { label: '1', link: '#' }, ] },Quiero recorrer este objeto y usarlo para generar algún resultado, quiero crear varias filas y tener 4 entradas por fila, he intentado lo siguiente,
const renderSection = (siteMapContent) => html`${siteMapContent.map((sitemapItem, index) => { if(index % 4) { section(sitemapItem, true); } else { section(sitemapItem, false); } const section = (item, parent) => { if(parent) { return html`<div class="p-sitemap__row"><div class="p-site-map__column"> <h2 class="p-site-map__section-title">${item.section}</h2> <ul class="p-site-map__list"> ${renderList(item.pages)} </ul></div></div>`; } return html`<div class="p-site-map__column"> <h2 class="p-site-map__section-title">${item.section}</h2> <ul class="p-site-map__list"> ${renderList(item.pages)} </ul></div>`; };Esto crea más que esto,
¿Cuál, como puede ver, envuelve cada cuarto elemento en la fila sin crear una nueva fila con 4 elementos en ella?
·
Juan Pablo Isaza
1 answers
Answer question0
Si primero agrega sus datos en una matriz de matrices (con 4 elementos por matriz interna), será mucho más fácil recorrer y crear sus secciones:
const siteMapItems = [{section:"Facts",pages:[{label:"1",link:"#"}]},{section:"Play",pages:[{label:"1",link:"#"}]},{section:"About",pages:[{label:"1",link:"#"}]},{section:"Mission",pages:[{label:"1",link:"#"}]},{section:"Contact",pages:[{label:"1",link:"#"}]}]; const agg = siteMapItems.reduce((acc, item, idx) => { acc.curr.push(item); if (((idx % 4) == 3 || idx == siteMapItems.length - 1)) { acc.result.push(acc.curr); acc.curr = [] } return acc; }, { result: [], curr: [] }); console.log(agg.result); .as-console-wrapper { min-height:100% !important; }Se convertirá en algo como:
const section = (item) => { return html`<div class="p-sitemap__row"> ${item.map(i => { return html`<div class="p-site-map__column"> <h2 class="p-site-map__section-title">${i.section}</h2> <ul class="p-site-map__list"> ${renderList(i.pages)} </ul></div>`; }} </div>`; };
·
Juan Pablo Isaza
Report
Answer question