CODEWITHSUNDEEP
javascriptjquery
Stof
Stof

Reputation: 670

JSON object with arrays converted to HTML table

the below code is the JSON response i recieve from an API. unfortunately i cannot change the way this response is sent, i can only use this response as is within the scope of Javascript/jQuery.

My goal is to transform this into a HTML table.

I have attempted to do this already myself;

function CreateTableView(objArray, theme, enableHeader) {
    // set optional theme parameter
    if (theme === undefined) {
        theme = 'mediumTable'; //default theme
    }

    if (enableHeader === undefined) {
        enableHeader = true; //default enable headers
    }

    // If the returned data is an object do nothing, else try to parse
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = '<table id="res" class="' + theme + '">';

    // table head
    if (enableHeader) {
        str += '<thead><tr>';
        for (var index in array[0]) {
            str += '<th scope="col">' + index.toUpperCase() + '</th>';
        }
        str += '</tr></thead>';
    }

    // table body
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt" id="' + array[i]['id'] + '">' : '<tr id="' + array[i]['id'] + '">';
        for (var index in array[i]) {
            str += '<td style="width:15%;">' + htmlspecialchars_decode(array[i][index]) + '</td>';
        }
        str += '<td><a href="#" onClick="editPerson(' + array[i]['id'] + ');">Edit</a></td><td><a href="#" onClick="delPerson(' + array[i]['id'] + ');">Delete</a></td></tr>';
    }
    str += '</tbody>'
    str += '</table>';
    return str;
}

However I am only able to get the headers to show... But it works well if the JSON response has only one array ie one row returned.

the code above was adapted from several other questions like this on Stackoverflow, I have spent days on this and cannot get these results to show in a table... This is just one example of many other that are returned just like this example and i will need to reuse this solution many times making it very important to me.

"ItemArray":{
        "id":"14"
        ,"0":
            {"id":"1","username":"guest","fname":"Guest","lname":"User","email":"[email protected]","group":"member","active":"0","url":null,"last_activity":null}
        ,"1":
            {"id":"2","username":"system","fname":"Internal","lname":"System","email":"[email protected]","group":"member","active":"0","url":null,"last_activity":null}
        ,"2":
            {"id":"3","username":"master","fname":"Super","lname":"Admin","email":"[email protected]","group":"member","active":"0","url":null,"last_activity":null}
        ,"3":
            {"id":"14","username":"apitest","fname":"API","lname":"Test","email":"[email protected]","group":"member","active":"0","url":null,"last_activity":"2012-10-29 02:48:43"}
        }

Upvotes: 0

Views: 1370

Answers (2)

Skpd
Skpd

Reputation: 670

You can't use array.length for Object, so you need:

for (var o in array) if (array.hasOwnProperty(o)) {
    var row = array[o];
}

Upvotes: 1

user1600124
user1600124

Reputation: 440

Ok... The problem is the your item array is parsed into an object. Not an array. If you log this:

  typeof array.length

The result is undefined. So your loops doesn't get run.

Upvotes: 0

Related Questions