ohmyDOM

by Brynner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div data-loop="account" class="hide">
  <h2 data-content="id"></h2>
  <em data-content="status"></em>
  <p data-content="user.name"></p>
  <p data-content="user.email"></p>
</div>

JavaScript

/* Author: http://brynner.net */
var account = [
    {
        id: 1,
        user: {
            name: 'Brynner',
            email: '[email protected]'
        },
        status: 'active'
    },
    {
        id: 2,
        user: {
            name: 'Ferreira',
            email: '[email protected]'
        },
        status: 'pending'
    },
    {
        id: 4,
        user: {
            name: 'Silva',
            email: '[email protected]'
        },
        status: 'banned'
    }
];
createCardgrid('account', account);



function createCardgrid(loopName, data) {

        var dataLoopElement = $('[data-loop="'+loopName+'"]');
        var currentTemplate = dataLoopElement.html();

        dataLoopElement.append('<div data-template></div><div data-result></div>');
        dataLoopElement.find('[data-template]').html(currentTemplate);
        dataLoopElement.removeClass('hide');

        var template = dataLoopElement.find('[data-template]');
        var result = dataLoopElement.find('[data-result]');

        template.addClass('hide');
        
        for (item in data) {
            result.append('<div data-set="'+loopName+'-'+data[item].id+'">'+template.html()+'</div>');
            addContentFromDataToHtml(data[item], loopName+'-'+data[item].id);
        }
    }


// Add data to HTML according to object´s property name
function addContentFromDataToHtml(object, dataSet) {
    recursiveObject({object: object, callback: addContentFromDataToHtmlCallback, dataSet: dataSet});
}
function recursiveObject(recursiveParams) {
    if (recursiveParams.parentsItem) {
        recursiveParams.parentsItem = recursiveParams.parentsItem+'.';
    } else {
        recursiveParams.parentsItem = '';
    }
    if (typeof(recursiveParams.object) == 'object') {
        for(var item in recursiveParams.object){
            recursiveObject({object: recursiveParams.object[item], parentsItem: recursiveParams.parentsItem+item, callback: recursiveParams.callback, dataSet: recursiveParams.dataSet});
           ...