0
187
Visualizaçõesjavascript loop wrapping every 4 elements in a parent
I have JSON object that looks similar to this,
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: '#' },
]
},
I am wanting to loop over this object and use it to build some output, I want to create mutiple rows and have 4 entries per row, I have tried the following,
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>`;
};
This creates outlike this,
Which as you can see wraps every 4th element in the row not creating a new row with 4 elements in it?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
If you first aggregate your data into an array of arrays (with 4 items per inner array) then it will make it a lot easier to loop over and create your sections:
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; }It will become something like:
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
Relatório
Responde à pergunta