How can i create columns & rows of html table from json by javascript

Question

User-454825017 posted

There are many example that how to create html table with json data but in every example i explore they hard code column name but at my side column name is dynamic and no of columns not known at runtime. think about pivot data where column not known.

here is one link i am referring one url https://www.aspsnippets.com/Articles/Populate-Bind-HTML-Table-from-database-using-jQuery-AJAX-and-JSON-in-ASPNet-MVC.aspx

which generate html table with json data using javascript but i want to generate columns dynamically from json because when we pass model then model has column name. 

so instead of hard code column name how can i generate column and rows all from json ?

Answer 1

User475983607 posted

First, this problem has been solved with JavaScript libraries to render tables.  It's just a matter of find a library that has the features you are looking for. 

if you want to write your own then the first step is grabbing the object keys; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Once you know the keys then you can build the columns and rows.  It's just a matter of writing the code.

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>
<input id="Button1" type="button" value="button" />
<hr />
<div id="list">

</div>

@section scripts{ 
<script>
    $('#Button1').click(function () {
        $.ajax({
            method: 'get',
            url: 'https://localhost:44379/weatherforecast'
        }).done(function (data) {
            $('#list').html('');
            var table = populateTable(data);
            $('#list').append(table);
        });
    });

    function populateTable(data) {
        var thead = populateTableHeader(data);
        console.log(thead)
        var tbody = populateTableBody(data);

        return "<table border='1'>" + thead + tbody + "</table>";
    }

    function populateTableBody(data) {
        var columns = Object.keys(data[0]);

        let results = data.map(r => {
            let row = "<tr>";           
            columns.forEach(function (key) {
                row += "<td>" + r[key] + "</td>";
            });
            row += "</tr>";
            return row;
        });
        return "<tbody>" + results.join('') + "</tbody>";
    }

    function populateTableHeader(data) {
        var columns = Object.keys(data[0]);
        var headerCells = columns.map(r =>  {
            return "<th>" + r + "</th>";
        });

        return "<thead><tr>" + headerCells.join('') + "</thead></tr>";

    }

</script>
}

Answer 2

User-454825017 posted

Thank you so much for reply with sample code.

Object.keys works fine in old browser ?

it would be nice if you also post server side action code too. thanks