JSFiddle - React, Tailwind, and code Playground

HTML

<div id="insertHere"></div>

JavaScript

var data = [{
    "parent": {
        "firstname": "firstname",
            "lastname": "lastname"
    }
}, {
    "parent": {
        "firstname": "firstname2",
            "lastname": "lastname2"
    }
}, {
    "parent": {
        "firstname": "firstname3",
            "lastname": "lastname3"
    }
}, {
    "parent": {
        "firstname": "firstname4",
            "lastname": "lastname4"
    }
}, {
    "parent": {
        "firstname": "firstname5",
            "lastname": "lastname5"
    }
}, {
    "parent": {
        "firstname": "firstname6",
            "lastname": "lastname6"
    }
}, {
    "parent": {
        "firstname": "firstname7",
            "lastname": "lastname7"
    }
}, {
    "parent": {
        "firstname": "firstname8",
            "lastname": "lastname8"
    }
}, {
    "parent": {
        "firstname": "firstname9",
            "lastname": "lastname9"
    }
}, {
    "parent": {
        "firstname": "firstname10",
            "lastname": "lastname10"
    }
}, {
    "parent": {
        "firstname": "firstname11",
            "lastname": "lastname11"
    }
}, {
    "parent": {
        "firstname": "firstname12",
            "lastname": "lastname12"
    }
}, {
    "parent": {
        "firstname": "firstname13",
            "lastname": "lastname13"
    }
}, {
    "parent": {
        "firstname": "firstname14",
            "lastname": "lastname14"
    }
}
]

var start = 0;
var el = document.getElementById('insertHere');
while (start < data.length) {
    for (var i = start; i < start + 4; i++) {    
        el.innerHTML += data[i].parent.firstname + " - " + data[i].parent.lastname + "<br />";
    }
    el.innerHTML += "<br/><br/>"
    start += 4;
}