CODEWITHSUNDEEP
htmlmultiple-columnsaureliarepeater
Norm Strassner
Norm Strassner

Reputation: 356

Aurelia: Trying to make 2 HTML columns with single array

I'm having a problem figuring out how to make two equal columns (won't be exactly equal if the array length is odd) out of a single array.

So , and have them in two columns.

Upvotes: 1

Views: 55

Answers (1)

Fred Kleuver
Fred Kleuver

Reputation: 8047

This isn't really a question specific to Aurelia, but I'm guessing the follow-up question would be.

won't be exactly equal if the array length is odd

That tells me you want to have this:

[1, 2, 3, 4, 5, 6]

And turn it into this:

[[1, 2], [3, 4], [5, 6]]

If you want to do this in a repeater, try this:

export class PairValueConverter {
    fromView(input) {
        return input.reduce((res, cur, i, arr) {
          if (i % 2 === 0) res.push(arr.slice(i, i + 2));
          return res;
        }, []);
    }
}

And then in your html:

<div repeat.for="item of items | pair">${item[0]} - ${item[1]}</div>

It's better if you put more effort in your question though, show what you've tried, etc. Someone might judge me for answering this :)

Upvotes: 2

Related Questions