Dynamic ui from json object using web Api with jquery

Updated : Nov 15, 2019 in Articles

Dynamic ui from json object using web Api with jquery

In this article we will learn about how to create Dynamic ui from json object using web Api with jquery step by step

Steps for implementing Dynamic ui from json object

  1. Creating the HTML page
  2. Using test web Apis and external css and js CDN’s
  3. Implementing the javascript script file

Step 1: Creating the HTML page

Go to visual studio create a empty web project and Add HTML page or else you will use notepad++

Before going to implementing Html page we want external cdn are required like jquery.min.js version 3.4.1 , bootstrap.min.js version 3.4.0 ,bootstrap.min.css version 3.4.0

Add given below external cdn’s or else download this cdns file and save in your local folder

Step 2: Using test web Apis and external css and js CDN’s

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>l

Add the given below html page including above external cdns at head tag

the given below Dynamic ui HTML page have a dynamic_table() javascript function this function accept two parameters (web apis)

dynamic_table() javascript function

  1. first parameter( web api) for getting the all the list of records
  2. second parameter ( web api) for getting the record based on id

Test Web Apis for creating Dynamic ui from json object

string craeteurl = "https://jsonplaceholder.typicode.com/posts";
string editUrl = "https://jsonplaceholder.typicode.com/posts/";

string craeteurl = "http://dummy.restapiexample.com/api/v1/employees";
string editUrl = "http://dummy.restapiexample.com/api/v1/employee/";

Htmlpage

<br /><br />

<script src="assets/DynamicTableJs.js"></script>
<link href="assets/DynamicTableCss.css" rel="stylesheet" />

<div class="container">
    <h1><a href="https://tutorialshelper.com/"> dynamic ui  from json using web Api with jquery</a></h1>

    <div class="tables" id="showData"></div>

</div>

<script>
    $(document).ready(function () {
        dynamic_table("http://dummy.restapiexample.com/api/v1/employees", "http://dummy.restapiexample.com/api/v1/employee/");

        //dynamic_table("https://jsonplaceholder.typicode.com/posts", "https://jsonplaceholder.typicode.com/posts/");

    });
</script>

<div class="modelpop">

</div>

Add the given below css file for table design

DynamicTableCss.css

.col-sm-12.modeldata {
    padding-top: 19px;
    padding-bottom: 7px;
}

.addme {
    margin-bottom: 11px;
    background-color: #d0e4f5;
    border: 0px solid #ccc;
    padding: 12px;
    box-shadow: 0 0 1px black;
}

.modal-body {
    padding: 0px !important;
}

.modal-header {
    background: #a2c1dc;
}

table.blueTable {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

    table.blueTable td, table.blueTable th {
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
    }

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

    table.blueTable tr:nth-child(even) {
        background: #D0E4F5;
    }

    table.blueTable thead {
        background: #1C6EA4;
        background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        border-bottom: 2px solid #444444;
    }

        table.blueTable thead th {
            font-size: 15px;
            font-weight: bold;
            color: #FFFFFF;
            border-left: 2px solid #D0E4F5;
        }

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

    table.blueTable tfoot {
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        background: #D0E4F5;
        background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
        background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
        background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
        border-top: 2px solid #444444;
    }

        table.blueTable tfoot td {
            font-size: 14px;
        }

        table.blueTable tfoot .links {
            text-align: right;
        }

            table.blueTable tfoot .links a {
                display: inline-block;
                background: #1C6EA4;
                color: #FFFFFF;
                padding: 2px 8px;
                border-radius: 5px;
            }

Step 3: Implementing the javascript script file

add the following implemented javascript code this code we have 3 functions

  • dynamic_table ()
  • CreateDynamicModelPopup()
  • EditTable()
  1. dynamic_table () javascript function will create dynamic table based on json object
  2. CreateDynamicModelPopup() javascript function will create dynamic modal popup based on json object
  3. EditTable() javascript function will create modal popup and get the values dynamically from json object

DynamicTable.js

function dynamic_table(url, editUrl) {
    window.editUrl = editUrl
    $.ajax({
        url: url,
        data: {
            format: 'json'
        },
        error: function () {
            $('#info').html('<p>An error has occurred</p>');
        },
        dataType: 'json',
        success: function (data) {
            // EXTRACT VALUE FOR HTML HEADER.
            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);
                    }
                }
            }
            col.push("Actons");
            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");
            table.setAttribute('class', 'table blueTable');
            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1);                   // TABLE ROW.
            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");      // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            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 d = data[i].id;
                tabCell.innerHTML = '<a href="#" onclick="return EditTable(' + data[i].id + ' )">Edit</a> | <a href="#" onclick="DeleteTable(' + data[i].id + ')">Delete</a></td>'
            }
            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
            jQuery('.tables').before('<input type="submit" onclick="return CreateDynamicModelPopup();" class="addme" value="Add New!"></div>');
        },
        type: 'GET'
    });
};


function CreateDynamicModelPopup() {
    var d = window.cols;
    var pageTitle = $(this).attr('pageTitle');
    var pageName = $(this).attr('pageName');

    var modelbodystring = "";
    modelbodystring += '<div class="modal fade" tabindex="-1" role="dialog">'
    modelbodystring += '<div class="modal-dialog">'
    modelbodystring += ' <div class="modal-content">'
    modelbodystring += ' <div class="modal-header">'
    modelbodystring += '  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'
    modelbodystring += '<h4 class="modal-title"></h4>'
    modelbodystring += ' </div>'
    modelbodystring += ' <div class="modal-body">'
    $.each(d, function (i, v) {
        if (i !== 0) {
            modelbodystring += '<div class="col-sm-12 modeldata">'
            modelbodystring += '<div class="col-sm-3">'
            modelbodystring += '<label>' + v + '</label>'
            modelbodystring += '</div>'
            modelbodystring += '<div class="col-sm-9">'
            modelbodystring += '<input class="form-control" type="text" name=' + v + ' id=' + v + ' value=""/>'
            modelbodystring += '</textarea >'
            modelbodystring += '</div>'
            modelbodystring += '</div>'
        }
    });
    modelbodystring += '</div >'
    modelbodystring += ' <div class="modal-footer">'
    modelbodystring += ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
    modelbodystring += '</div>'
    modelbodystring += '</div>'
    modelbodystring += '</div>'
    modelbodystring += '</div>'

    $(".modal .modal-title").html("Create");
    $(".modelpop").html(modelbodystring);
    $(".modal").modal("show");
    $(".modal .modal-body").load("Create Data");
    //});
};

function EditTable(id, editUrl) {
    var d = window.editUrl;
    $.ajax({
        url: d + id,
        typr: "GET",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        success: function (resultdata) {
            var modelbodystring = "";
            modelbodystring += '<div class="modal fade" tabindex="-1" role="dialog">'
            modelbodystring += '<div class="modal-dialog">'
            modelbodystring += ' <div class="modal-content">'
            modelbodystring += ' <div class="modal-header">'
            modelbodystring += '  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'
            modelbodystring += '<h4 class="modal-title"></h4>'
            modelbodystring += ' </div>'
            modelbodystring += ' <div class="modal-body">'

            var loop = 0;
            $.each(resultdata, function (i, v) {
                if (loop == 0) {
                    modelbodystring += '<div class="col-sm-12 modeldata" style="display:none">'
                    modelbodystring += '<div class="col-sm-3">'
                    modelbodystring += '<label>' + i + '</label>'
                    modelbodystring += '</div>'
                    modelbodystring += '<div class="col-sm-9">'
                    if (v.length >= 20) {
                        modelbodystring += '<textarea rows="4" cols="50" class="form-control" type="text" name=' + i + ' id=' + i + '/>'
                        modelbodystring += v
                        modelbodystring += '</textarea >'
                    }
                    else {
                        modelbodystring += '<input class="form-control" type="text" name=' + i + ' id=' + i + ' value="' + v + '"/>'
                    }
                    modelbodystring += '</div>'
                    modelbodystring += '</div>'
                    loop++;
                }
                else {
                    modelbodystring += '<div class="col-sm-12 modeldata">'
                    modelbodystring += '<div class="col-sm-3">'
                    modelbodystring += '<label>' + i + '</label>'
                    modelbodystring += '</div>'
                    modelbodystring += '<div class="col-sm-9">'
                    if (v.length >= 20) {
                        modelbodystring += '<textarea rows="4" cols="50" class="form-control" type="text" name=' + i + ' id=' + i + '>'
                        modelbodystring += v
                        modelbodystring += '</textarea >'
                    }
                    else {
                        modelbodystring += '<input class="form-control" type="text" name=' + i + ' id=' + i + ' value="' + v + '"/>'
                    }
                    modelbodystring += '</div>'
                    modelbodystring += '</div>'
                }
            });
            modelbodystring += '</div >'
            modelbodystring += ' <div class="modal-footer">'
            modelbodystring += ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
            modelbodystring += '</div>'
            modelbodystring += '</div>'
            modelbodystring += '</div>'
            modelbodystring += '</div>'

            $(".modal .modal-title").html("Edit");
            $(".modelpop").html(modelbodystring);
            $(".modal").modal("show");
            $(".modal .modal-body").load("Edit Data");
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
};


Run your html page..

Output:

The given below modal popup will automatically changed based on web api this modal popup dynamically created from api

Dynamic ui from json object using web Api with jquery
Dynamic ui from json object using web Api with jquery

dynamic edit modal popup

Dynamic ui from json object using web Api with jquery
Dynamic ui from json object using web Api

thanks..

Summary

the above example we will learned implementing the Dynamic ui from json object using web Api with jquery next article we will perform crud operation using Asp.net mvc with this example

Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
18 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Chris Robinsons
March 26, 2020 11:38 pm

First time visiting your website, I enjoy your website!

Yasmine Nurse
Yasmine Nurse
April 7, 2020 3:20 am

Bookmarked!, I like your website!

Porfirio Huck
Porfirio Huck
April 7, 2020 11:33 am

as soon as I found this site I went on reddit to share some of the love with them.

Aleshia Androsky
April 8, 2020 2:06 pm

Saved as a favorite!, I like your website!

Eddie Fieck
April 9, 2020 3:08 pm

tҺe website іѕ really good, I like your site!

Ross Coggsdale
April 10, 2020 11:24 am

tҺe website іѕ really good, I enjoy it!

Granville Imperial
April 13, 2020 7:10 pm

Saved as a favorite!, I really like your website!

Dede Milewski
Dede Milewski
April 16, 2020 10:25 pm

First time visiting your website, I enjoy your blog!

Usha Abramov
April 17, 2020 6:09 pm

First time visiting your website, I enjoy your blog!

Ingeborg Donton
April 18, 2020 6:44 pm

tҺe website іѕ really good, I enjoy it!

Lucie Fiene
April 19, 2020 4:43 am

tҺe website іѕ really good, I enjoy your website!

Norbert Milanowski
Norbert Milanowski
April 21, 2020 11:04 pm

Saved as a favorite!, I really like your web site!

Vonnie Ridge
April 24, 2020 5:17 am

First time visiting your website, I enjoy your web site!

Rolland Aki
April 24, 2020 9:30 am

Saved as a favorite!, I really like your website!

Modesto Bartram
April 25, 2020 7:55 pm

Saved as a favorite!, I like your site!

Sidney Traner
April 25, 2020 10:36 pm

First time visiting your website, I love it!

Charlette Lagana
April 28, 2020 5:43 am

First time visiting your website, I enjoy your site!

18
0
Would love your thoughts, please comment.x
()
x