Question

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":"[e-mail]","group":"member","active":"0","url":null,"last_activity":null}
        ,"1":
            {"id":"2","username":"system","fname":"Internal","lname":"System","email":"[e-mail]","group":"member","active":"0","url":null,"last_activity":null}
        ,"2":
            {"id":"3","username":"master","fname":"Super","lname":"Admin","email":"[e-mail]","group":"member","active":"0","url":null,"last_activity":null}
        ,"3":
            {"id":"14","username":"apitest","fname":"API","lname":"Test","email":"[e-mail]","group":"member","active":"0","url":null,"last_activity":"2012-10-29 02:48:43"}
        }

Answer 1

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

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