How to convert JSON Data Dynamically to HTML Table using jQuery

Convert JSON Data Dynamically to HTML Table. How to read data from JSON and display in a table using jQuery. How to read data from JSON array or JSON nested array. How to create JSON array object.Dynamically Create a table with rows in jQuery. Search data from HTML table using jQuery.

Data in JSON format

var json_obj  = {
          "name":"John",
          "age":30,
          "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda","550" ] }
    ]
 }

joson_obj is a simple variable which will hold the JSON Object. “cars” is an array object and “models” is a nested array object.

how to search data from HTML table using jQuery.

$("#search").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("table tr").filter(function(index) {
      if(index>0){
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
}
});

Convert JSON Data Dynamically to HTML Table

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Table</title>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <style>
button{
    border-radius: 10px;
    height: 45px;
    width: 150px;
    text-align: center;
    background-color: #5499C7;
    font-size: 15px;
    color: #ffffff;

    }
  input{

    height: 35px;
    font-size: 15px;
}
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: center;
    padding: 15px;
    font-size: 20px;
}



th {
    background-color: #5499C7;
    color: white;
    font-style: bold;
    font-size: 35px;
}
</style>


    <script >
//JSON Object................
      var json_obj  = {
          "name":"John",
          "age":30,
          "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda","550" ] }
    ]
 }
//JSON Object End................

//Create table and fetch data from JSON Object.
        $(document).ready(function(){
            $("button").click(function(){
              var number_of_rows = json_obj.cars.length;
              var k = 0;
              var table_body = '<table border="1" id="example"><thead><tr><th>Cars</th><th>Models</th></tr></thead><tbody>';
              for(j in json_obj.cars){

              for(i =0;i<json_obj.cars.length;i++){
                    table_body+='<tr>';

                    table_body +='<td>';
                    table_body +=json_obj.cars[k]["name"];
                    table_body +='</td>';

                   
                    table_body +='<td>';
                    table_body +=json_obj.cars[k].models[i];
                    table_body +='</td>';
                
                    table_body+='</tr>';
              }
              k++;
            }

                table_body+='</tbody></table>';
               $('#tableDiv').html(table_body);
              //display data..........
            });
// for search function.................................. only............................

        $("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();

        $("table tr").filter(function(index) {
          if(index>0){
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    }
    });
});

//=================End=========================End===============================
        });
</script>
</head>
<body>

<div style="margin-top: 50px; margin-left: 250px; margin-right: 250px;">

    <button>Create Table</button>

<input type="text" id="search" placeholder="Search data here....."></input>


    <div id="tableDiv" style="margin-top: 40px">
        Table will gentare here.
    </div>
</div>

<p id="p1"></p>

</body>
</html>

OUTPUT:

Convert JSON Data Dynamically to HTML Table
Convert JSON Data Dynamically to HTML Table

Add a Comment

Your email address will not be published. Required fields are marked *

3 × 3 =