Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make HTML by using the Json Array

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 232
    Comment on it

    Hello Reader's

    If you having the data coming from the Json array and you need it to show in html table. Then you can perform the short Jquery action for making it automated restful service.

    Here the code of javascript

    var _table_ = document.createElement('table'),
        _tr_ = document.createElement('tr'),
        _th_ = document.createElement('th'),
        _td_ = document.createElement('td');
    
    // Builds the HTML Table out of myList json data from Ivy restful service.
     function buildHtmlTable(arr) {
         var table = _table_.cloneNode(false),
             columns = addAllColumnHeaders(arr, table);
         for (var i=0, maxi=arr.length; i < maxi; ++i) {
             var tr = _tr_.cloneNode(false);
             for (var j=0, maxj=columns.length; j < maxj ; ++j) {
                 var td = _td_.cloneNode(false);
                     cellValue = arr[i][columns[j]];
                 td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
                 tr.appendChild(td);
             }
             table.appendChild(tr);
         }
         return table;
     }
    
     // Adds a header row to the table and returns the set of columns.
     // Need to do union of keys from all records as some records may not contain
     // all records
     function addAllColumnHeaders(arr, table)
     {
         var columnSet = [],
             tr = _tr_.cloneNode(false);
         for (var i=0, l=arr.length; i < l; i++) {
             for (var key in arr[i]) {
                 if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) {
                     columnSet.push(key);
                     var th = _th_.cloneNode(false);
                     th.appendChild(document.createTextNode(key));
                     tr.appendChild(th);
                 }
             }
         }
         table.appendChild(tr);
         return columnSet;
     }
    
    
    document.body.appendChild(buildHtmlTable([
        {"name" : "abc", "age" : 50},
        {"age" : "25", "hobby" : "swimming"},
        {"name" : "xyz", "hobby" : "programming"}
    ]));
    

    Now add the css for table:-

    th, td {
        border: 1px solid;
    }
    th {
        font-weight : bold
    }
    

    Now the output of this page will be a html table showing the details of Json array in table. And dont forgot to call Jquery latest file.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: