Display data in Div from json in jquery

Question

I have data in a json using ajax code. Now I want to display data in a div Below is the code which I bring

{  
   "Table":[  
      {  
         "APP_MST_ID":321.0,
         "APPLICATIONNAME":"R-Locator for Enterprise",
         "PROJECTNO":"R4G-25-APD-006",
         "VSS_FOLDER_LOC":null,
         "CAT_ID":1.0,
         "SPOC_APPUSRID":79.0,
         "SUPPORT_TEAM":"0",
         "REQUESTED_BY_APPUSRID":51.0,
         "DELIVERY_MANAGER_APPUSRID":43.0,
         "CREATEDBY_APPUSRID":null,
         "CREATEDDATE":null,
         "MODIFIEDBY_APPUSRID":null,
         "MODIFIED_DATE":null,
         "APPIMAGEPATH":null,
         "PARENT_APP_ID":null,
         "SERVER_LOCATION":null,
         "USAGE_CATID":null
      }
   ]
}

and the div.

<div id="dvTable">                       
</div>

And for bringing the data below is the code.

function SearchInfo() {

        var textBoxValue = $('#addresSearch').val();

        $.ajax({
            type: "POST",
            url: "http://localhost:11181/Search/GetFilterSearch",
            data: JSON.stringify({ textBoxValue: textBoxValue }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                // display data in div here
            }
        })
    }

Now how should I display that data which is in json in a div and show it.

It's unclear how do you want to present it. I presume that Table can have more than 1 item - do all objects in Table array have exact same keys? — fen1x
– fen1x, Commented Feb 1, 2018 at 7:01
loop the data and create td tag and append all td to the table tag — Rebel Rider
– Rebel Rider, Commented Feb 1, 2018 at 7:04

Eddie · Accepted Answer · 2018-02-01 10:51:57Z

1

You can loop like:

$(document).ready(function(){
    /*
	var r = {  
	   "Table":[  
		  {  
			 "APP_MST_ID":321.0,
			 "APPLICATIONNAME":"R-Locator for Enterprise",
			 "PROJECTNO":"R4G-25-APD-006",
			 "VSS_FOLDER_LOC":null,
			 "CAT_ID":1.0,
			 "SPOC_APPUSRID":79.0,
			 "SUPPORT_TEAM":"0",
			 "REQUESTED_BY_APPUSRID":51.0,
			 "DELIVERY_MANAGER_APPUSRID":43.0,
			 "CREATEDBY_APPUSRID":null,
			 "CREATEDDATE":null,
			 "MODIFIEDBY_APPUSRID":null,
			 "MODIFIED_DATE":null,
			 "APPIMAGEPATH":null,
			 "PARENT_APP_ID":null,
			 "SERVER_LOCATION":null,
			 "USAGE_CATID":null
		  }
	   ]
	};
    */

    //Empty rows
    var r = {  
	   "Table":[]
	};
	
	var html = '';

    //Check if has data
    if ( r.Table.length !== 0 ) {
	html += '<table>';
	
	for ( var key in r.Table ) {
		var row = r.Table[key];

		//For the header
		if ( key == 0 ) {
		html += '<tr>';
		for ( var key2 in row ) {
			  html += '<th>';
			  html += key2;
			  html += '</th>';
		}
		html += '</tr>';
		}


		html += '<tr>';
		for ( var key2 in row ) {
			html += '<td>';
			html += row[key2];
			html += '</td>';
		}
		html += '</tr>';
	}
	
	html += '</table>';
   } else {
       //No data.
       html += "No data.";
   }
	
	$( "#dvTable" ).html( html );
	
	//console.log();
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="dvTable"></div>

edited Feb 1, 2018 at 10:51

answered Feb 1, 2018 at 7:11

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

HEEN Over a year ago

what if, I there is no record. I want to show as null table. How to display that with your code. Please suggest

Eddie Over a year ago

You can test if r.Table is empty by r.Table.length === 0

Eddie Over a year ago

So you can enclosed the code above in if ( r.Table.length !== 0 )

HEEN Over a year ago

Eddie, I need to display first column values as a clickable link..can I ??

HEEN Over a year ago

please atleast reply or should I post it as a new question ?

|

Rebel Rider · Accepted Answer · 2018-02-01 07:10:50Z

0

var table = $('#table_id');

for (i = 1; i < data.length; i++) {
    table.append('<tr>');
        table.find('tr:last-child').append(

        '<td>' + data[i]["APP_MST_ID"] + '</td>',
        '<td>' + data[i]["APPLICATIONNAME"] + '</td>'
        );
    }

<table class="GeneratedTable" align="center" id = "table_id">
    <tr>
        <th>APP_MST_ID</th>
        <th>APPLICATIONNAME</th>
    </tr>
</table>

answered Feb 1, 2018 at 7:10

Rebel Rider

16716 bronze badges

Comments

xale94 · Accepted Answer · 2018-02-01 07:10:59Z

This is one of a lot of possible answers. You can do it even with Object.keys, concatenating with DOM functions...

let response = {  
   "Table":[  
      {  
         "APP_MST_ID":321.0,
         "APPLICATIONNAME":"R-Locator for Enterprise",
         "PROJECTNO":"R4G-25-APD-006",
         "VSS_FOLDER_LOC":null,
         "CAT_ID":1.0,
         "SPOC_APPUSRID":79.0,
         "SUPPORT_TEAM":"0",
         "REQUESTED_BY_APPUSRID":51.0,
         "DELIVERY_MANAGER_APPUSRID":43.0,
         "CREATEDBY_APPUSRID":null,
         "CREATEDDATE":null,
         "MODIFIEDBY_APPUSRID":null,
         "MODIFIED_DATE":null,
         "APPIMAGEPATH":null,
         "PARENT_APP_ID":null,
         "SERVER_LOCATION":null,
         "USAGE_CATID":null
      }
   ]
}

for(let k in response.Table[0]){
  window.document.getElementById("dvTable").innerHTML+=`<div>${response.Table[0][k]}</div>`;
}

<div id="dvTable">                       
</div>

Patrick Mlr · Accepted Answer · 2018-02-01 07:23:06Z

This could be a possible solution.

var json = '{"Table": [{"APP_MST_ID": 321.0,"APPLICATIONNAME": "R-Locator for Enterprise","PROJECTNO": "R4G-25-APD-006","VSS_FOLDER_LOC":null,"CAT_ID":1.0,"SPOC_APPUSRID":79.0,"SUPPORT_TEAM":"0","REQUESTED_BY_APPUSRID":51.0,"DELIVERY_MANAGER_APPUSRID":43.0,"CREATEDBY_APPUSRID": null,"CREATEDDATE": null,"MODIFIEDBY_APPUSRID": null,"MODIFIED_DATE": null,"APPIMAGEPATH": null,"PARENT_APP_ID": null,"SERVER_LOCATION": null,"USAGE_CATID": null}]}';
var objects = JSON.parse(json); // Parse the json
objects = objects.Table;        // Get the content of Table

var string = "";                // create a string
jQuery.each(objects[0], function(id, value) { // get all the id's and values
   string = string + value + " "; // Do something here with the values or id's
});

// create something where you add it, or do it inside the each()-function
var div = document.createElement('div'); 
div.innerHTML = string;
document.body.appendChild(div);
// ^ just to show the values in this example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

fjoe · Accepted Answer · 2018-02-01 08:27:04Z

You could just dump your formatted data to the div but as its difficult to replicate an $.ajax call I have commented out those parts.

It would work something like this:

var r =
`{
  "Table": [{
    "APP_MST_ID": 321.0,
    "APPLICATIONNAME": "R-Locator for Enterprise",
    "PROJECTNO": "R4G-25-APD-006",
    "VSS_FOLDER_LOC": null,
    "CAT_ID": 1.0,
    "SPOC_APPUSRID": 79.0,
    "SUPPORT_TEAM": "0",
    "REQUESTED_BY_APPUSRID": 51.0,
    "DELIVERY_MANAGER_APPUSRID": 43.0,
    "CREATEDBY_APPUSRID": null,
    "CREATEDDATE": null,
    "MODIFIEDBY_APPUSRID": null,
    "MODIFIED_DATE": null,
    "APPIMAGEPATH": null,
    "PARENT_APP_ID": null,
    "SERVER_LOCATION": null,
    "USAGE_CATID": null
  }]
}`;

function SearchInfo() {
  //var textBoxValue = $('#addresSearch').val();

  //$.ajax({
  //  type: "POST",
  //  url: "http://localhost:11181/Search/GetFilterSearch",
  //  data: JSON.stringify({
  //    textBoxValue: textBoxValue
  //  }),
  //  contentType: "application/json; charset=utf-8",
  //  dataType: "json",
  //  success: function(r) {
      // display data in div here
      $("#dvTable").html("<pre>" + r + "</pre>")
  //  }
  //})
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="SearchInfo();">Search</button>

<div id="dvTable"></div>

If you are looking for an actual table then this is how you would do it:

var r = {
  "Table": [{
    "APP_MST_ID": 321.0,
    "APPLICATIONNAME": "R-Locator for Enterprise",
    "PROJECTNO": "R4G-25-APD-006",
    "VSS_FOLDER_LOC": null,
    "CAT_ID": 1.0,
    "SPOC_APPUSRID": 79.0,
    "SUPPORT_TEAM": "0",
    "REQUESTED_BY_APPUSRID": 51.0,
    "DELIVERY_MANAGER_APPUSRID": 43.0,
    "CREATEDBY_APPUSRID": null,
    "CREATEDDATE": null,
    "MODIFIEDBY_APPUSRID": null,
    "MODIFIED_DATE": null,
    "APPIMAGEPATH": null,
    "PARENT_APP_ID": null,
    "SERVER_LOCATION": null,
    "USAGE_CATID": null
  }]
};

function SearchInfo() {
  //var textBoxValue = $('#addresSearch').val();

  //$.ajax({
  //  type: "POST",
  //  url: "http://localhost:11181/Search/GetFilterSearch",
  //  data: JSON.stringify({
  //    textBoxValue: textBoxValue
  //  }),
  //  contentType: "application/json; charset=utf-8",
  //  dataType: "json",
  //  success: function(r) {
      // display data in div here
      $("#dvTable").html(CreateTable(r).html())
  //  }
  //})
}

function CreateTable(data) {
  var data = data.Table;

  var table = $("<table><tr /></table>");

  $.each(data[0], function(key, value) {
    table.find("tr").append("<th>" + key + "</th>");
  });

  $.each(data, function() {
    var trHtml = $("<tr />");
    $.each(this, function(key, value) {
      trHtml.append("<td>" + value + "</td>");
    });
    table.append(trHtml);
  });

  return table;
}

th,
td {
  border: solid 1px black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="SearchInfo();">Search</button>

<div id="dvTable"></div>

junaid · Accepted Answer · 2018-02-01 09:15:20Z

0

There are multiple ways, one of them is put a table tag in your div and append rows in it, like:

    $.each(r,function(index,value){
var html = '<td>'+
            '<tr>'+value.APP_MST_ID+'</tr>'+
'<tr>'+value.APPLICATIONNAME+'</tr>'+
'<tr>'+value.PROJECTNO+'</tr>'+
'<tr>'+value.VSS_FOLDER_LOC+'</tr>'+
'<tr>'+value.CAT_ID+'</tr>'+
'<tr>'+value.SPOC_APPUSRID+'</tr>'+
'<tr>'+value.SUPPORT_TEAM+'</tr>'+
'<tr>'+value.REQUESTED_BY_APPUSRID+'</tr>'+
'<tr>'+value.DELIVERY_MANAGER_APPUSRID+'</tr>'+
'<tr>'+value.CREATEDBY_APPUSRID+'</tr>'+
'<tr>'+value.CREATEDDATE+'</tr>'+
'<tr>'+value.MODIFIEDBY_APPUSRID+'</tr>'+
'<tr>'+value.MODIFIED_DATE+'</tr>'+
'<tr>'+value.APPIMAGEPATH+'</tr>'+
'<tr>'+value.PARENT_APP_ID+'</tr>'+
'<tr>'+value.value.SERVER_LOCATION+'</tr>'+
'<tr>'+value.USAGE_CATID+'</tr>'+
            '</td>'
    $('#table_id').append(html);
    })

and so on. and you can data format as you want.

edited Feb 1, 2018 at 9:15

answered Feb 1, 2018 at 7:10

junaid

931 gold badge1 silver badge8 bronze badges

3 Comments

Yahya Mukhtar Over a year ago

Great effort. Make more

junaid Over a year ago

It's beacause we miss value before variable names. try updated answer.

Patrick Mlr Over a year ago

Well, you're missing two ; and it still won't work. If r is the json, you need to parse it first.

Collectives™ on Stack Overflow

Display data in Div from json in jquery

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related