Convert JSON to HTML

var json_array = [
    {
        "name": "peter",
        "city": "los angeles",
        "age": "15"
    },
    {
        "name": "anna",
        "city": "new york",
        "age": "21"
    },
    {
        "name": "eddy",
        "city": "dallas",
        "age": "31"
    }
];
function getValues (obj) {
    var result = [];

    for (i in obj) {
        result.push(obj[i]);
    }

    return result;
}

function getHtmlGroupedByColumn(data) {
    var header = [];
    var rows = [];
    var html = '<table>';

    for (i in data) {
        var row = [];

        for (k in data[i]) {
            header[k] = k;
            row[k] = data[i][k];
        }

        rows.push(getValues(row));
    }

    html += '<tr><th>'+(getValues(header).join('</th><th>'))+'</th>';
    for (i in rows) {
        html += '<tr><td>'+(rows[i].join('</td><td>'))+'</td>';
    }
    html += '</table>';

    return html;
}

function getHtmlGroupedByRow(data) {
    var header = [];
    var rows = [];
    var html = '<table>';

    for (i in data) {
        var row = [];

        for (k in data[i]) {
            header[k] = k;
            row[k] = data[i][k];
        }

        rows.push(row);
    }

    html += '<tr><td></td>';
    var header_array = getValues(header);
    for (i = 0; i < header_array.length; i++) {
        html += '<th>'+(i+1)+'</th>';
    }
    html += '</tr>';

    for (i in header) {
        html += '<tr><th>'+i+'</th>';
        for (j in rows) {
            html += '<td>'+rows[j][i]+'</td>';
        }
        html += '</tr>';
    }

    html += '</table>';

    return html;
}

return JSON.stringify({
    bycolumn: getHtmlGroupedByColumn(json_array),
    byrow: getHtmlGroupedByRow(json_array)
})

No comments: