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

  • 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 ?

    Wednesday, July 15, 2020 6:20 PM

Answers

  • 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>
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 15, 2020 6:59 PM

All replies

  • 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>
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 15, 2020 6:59 PM
  • 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

    Thursday, July 16, 2020 6:25 AM