Table Grid JS

by Rijo R

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="myTable"></div>

JavaScript

var tableGenerate = function(){
    var myOption = {};
    var tabId = '';
    var mockData = {
        "page": 1,
        "per_page": 3,
        "total": 12,
        "total_pages": 4,
        "data": [
        {
        "id": 1,
        "first_name": "George",
        "last_name": "Bluth",
        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
        },
        {
        "id": 2,
        "first_name": "Janet",
        "last_name": "Weaver",
        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
        },
        {
        "id": 3,
        "first_name": "Emma",
        "last_name": "Wong",
        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
        }
        ]
        };
  /*  genHead = function(){
    var a = `<table><thead><tr>
    ${Object.keys(myOption).map(function(key, value) {
        if(myOption.hasOwnProperty('tabHead')) {
            return `<td>${key} bb</td>`
        }
      
    }).join("")}
    </tr></thead></table>`;
       tabId.append(a);

    } */
    tabGenerate = function() {
        tabId.append(`<table>${genHead()}${genBody()}</table>`);
    }
    genBody = function() {
    var tabBody = `<tbody>${genContent(myOption.public_api)}</tbody>`;
        return tabBody;
    }
    genContent = function(publicUrl) {
        //console.log(Object.keys(myOption.tabHead[0]));
        // for (variable in myOption.tabHead) { 
        //     console.log(Object.keys(myOption.tabHead[variable]));
        // }
        var row = `${mockData.data.map(function(key, value){
            return `<tr><td>${key.first_name}</td><td>${key.last_name}</td><td>${key.avatar}</td></tr>`
        }).join("")}`;

        return row;
    }
    genHead = function(){
    //    for(var key in myOption) {
    //        console.log(key);
    //    }
    var header = `<thead><tr>
    ${myOption.tabHead.map(function(key, value) {
        if(key.hasOwnProperty('displayName')){
          ...