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

- How to create dynamic form fields using jQuery - January 4, 2021
- What is CTS (Common Type System) in .Net - October 16, 2020
- What is main method in c# - October 13, 2020