JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<script src="http://files.the-friend-family.com/log.js"></script>

JavaScript

var data = [
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    }     
    ];

function breakArrayIntoGroups(data, maxPerGroup) {
    var numInGroupProcessed = 0;
    var groups = [[]];
    for (var i = 0; i < data.length; i++) {
        groups[groups.length - 1].push(data[i]);
        ++numInGroupProcessed;
        if (numInGroupProcessed >= maxPerGroup && i !== (data.length - 1)) {
            groups.push([]);
            numInGroupProcessed = 0;
        }
    }
    return groups;
}

log(breakArrayIntoGroups(data, 5));