dynamically table using Api in angularjs

Updated : Nov 29, 2019 in Articles

Create dynamically table using Api in angularjs

In this article, we will learn how to create dynamically table using API in angularjs simple way and clearly

Create a directory structure for angularJs application

Inside the controller folder, you will create a app.js file

app.js

var app = angular.module('myapp', []);

democontroller.js

app.controller('democontroller', function ($scope) {
    $scope.Message = "Create dynamically  table using Api in angular js";
    dynamic_table("http://dummy.restapiexample.com/api/v1/employees");
});
function dynamic_table(url) {
    $.ajax({
        url: url,
        data: {
            format: 'json'
        },
        error: function () {
            $('#info').html('<p>An error has occurred</p>');
        },
        dataType: 'json',
        success: function (data) {
          //get the table headers 
            var col = [];
            window.cols = col;
            for (var i = 0; i < data.length; i++) {
                for (var key in data[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
                break;
            }
            var pkid = col[0];
             //table pk id for editing or deleting table 
            window.pkid = pkid;
            col.push("Actons");
            var table = document.createElement("table");
            table.setAttribute('class', 'table cinereousTable');
            var tr = table.insertRow(-1);
            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");
                th.innerHTML = col[i];
                tr.appendChild(th);
            }
            for (var i = 0; i < data.length; i++) {
                tr = table.insertRow(-1);
                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = data[i][col[j]];
                }
                var g = window.pkid;
                var PktableId = data[i][g];
                tabCell.innerHTML = '<a href="#" ng-click="return EditTable(' + PktableId + ' )">Edit</a> | <a href="#" ng-click="DeleteTable(' + PktableId + ')">Delete</a></td>'
            }
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        },
        type: 'GET'
    });
};

Dynamictable.html

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <title>AngularJs Sample</title>
    <script src="Scripts/angular.js"></script>
    <script src="Controller/app.js"></script>
    <script src="Controller/democontroller.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
</head>
<body ng-app="myapp">
    <div ng-controller="democontroller">
        <h2>{{Message}}</h2>
        <div class="tables" id="showData"></div>
    </div>
</body>
</html>

Table.css

<style>
        table.cinereousTable {
            border: 6px solid #948473;
            background-color: #FFE3C6;
            width: 100%;
            text-align: center;
        }

            table.cinereousTable td, table.cinereousTable th {
                border: 1px solid #948473;
                padding: 4px 4px;
            }

            table.cinereousTable tbody td {
                font-size: 13px;
            }

            table.cinereousTable thead {
                background: #948473;
                background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
                background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
                background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #948473 100%);
            }

                table.cinereousTable thead th {
                    font-size: 17px;
                    font-weight: bold;
                    color: #F0F0F0;
                    text-align: left;
                    border-left: 2px solid #948473;
                }

                    table.cinereousTable thead th:first-child {
                        border-left: none;
                    }

            table.cinereousTable tfoot {
                font-size: 16px;
                font-weight: bold;
                color: #F0F0F0;
                background: #948473;
                background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
                background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
                background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #948473 100%);
            }

                table.cinereousTable tfoot td {
                    font-size: 16px;
                }
        
    </style>

Run your application

dynamically  table using Api in angularjs
dynamically table using Api in angularjs