Skip to content

A lightweight javascript renderer for arbitrarily nested, and grouped data, like merged tables cells, facebook updates grouped by avatar etc

Notifications You must be signed in to change notification settings

brendanheywood/javascript-grouper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

A js library for grouping datasets into simple structured html chunks.

Eg in a facebook feed multiple updates by the same person might be grouped together with the avatar icon only shown once, or if 10 users like the same thing or change their status, these are grouped together.

Another example is merging table cells when they are the same as the previous row.

It takes a javascript array and a function that returns an array of each chunks which it then de-duplicates and returns for rendering.

An example:

Let suppose you want to show a list of messages by people. You might have some markup like:

<div><img src=person1.jpg> <i>Comment 1</i> </div>
<div><img src=person2.jpg> <i>Comment 2</i> </div>
<div><img src=person2.jpg> <i>Comment 3</i> </div>
<div><img src=person3.jpg> <i>Comment 4</i> </div>

That looks ok, but then you want to group the items by Avatar when adjacent messages are by the same person.

So first you split each row into three items:

<div><img src=person1.jpg>  |  <i>Comment 1</i>  |  </div>
<div><img src=person2.jpg>  |  <i>Comment 2</i>  |  </div>
<div><img src=person2.jpg>  |  <i>Comment 3</i>  |  </div>
<div><img src=person3.jpg>  |  <i>Comment 4</i>  |  </div>

Now you just want to remove the last component in the rows which are going to be repeated (comment 2), and also remove the first component for the rows where they have been repeated (comment 3):

<div><img src=person1.jpg>  |  <i>Comment 1</i>  |  </div>
<div><img src=person2.jpg>  |  <i>Comment 2</i>  |  
                            |  <i>Comment 3</i>  |  </div>
<div><img src=person3.jpg>  |  <i>Comment 4</i>  |  </div>

This logic works because the first and last components (the open and close div) match each other. The center component is always shown.

This concept can be extended up to any level of nested, ie it could have 5, 7, 9 etc components.

Th javascript grouper implements all the funky logic to decide which components are redundant, you pass it a:

  • list of data items
  • a render function which turns each item into an odd number of compnents like above

It then does it's magic and returns a string

About

A lightweight javascript renderer for arbitrarily nested, and grouped data, like merged tables cells, facebook updates grouped by avatar etc

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published