dynamically table using Api in angularjs

by DuttaluruVijayakumar Updated : Nov 29, 2019 in Articles

Create dynamic table using Api in angular js

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

Before going to discuss the topic we will see first what is JSON object? because of web API returns either JSON or XML format

The JSON object is a combination of key/value pairs. the key is representing as a string in JSON and value can be of any type(like string, boolean, int, float…). The key/value are separated by a colon. Each key/value pair is separated by a comma.

Example:

{
    "Product": {
        "name":      "Iphone",
        "Price":     40000,
        "Active":    true
    }
}

In the above example, the product is an object in which “name”, “Price” and “Active” are the key. In this example, there are string, number, and boolean values for the keys.

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

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

by DuttaluruVijayakumar Updated : Nov 29, 2019 in Articles

Create dynamic table using Api in angular js

Example:

Related Posts: