Update html table according to ajax json response

Update html table according to ajax json response - javascript

i have a JSON response like below
{
"Parent": "skystar",
"Children": [
{"Name":"MW"},
{"Name":"PR"},
{"Name":"PV"},
{"Name":"ST"}
]
},
{
"Parent": "RR",
"Children": [
{"Name":"RC"},
{"Name":"RP"}
]
}
Now i need to bind this to the table.
i tried to call AJAX like below
$.ajax({
url: 'echo/sample.json/',
success: function (response) {
var trHTML = '';
$.each(response, function (i, item) {
trHTML += '<tr><td>' + item.Children + '</td>';
});
$('#records_table').append(trHTML);
}
});
But i am not able to bind the table
what i am doing wrong??
JSFIDDLE
one more thing every children has hypher link how to add it
How to do that in Jquery or javascript??
Any help??

Demo: http://jsfiddle.net/tqyn3/336/
var jsonData = '[{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}]';
$.ajax({
url: '/echo/json/',
type: 'POST',
data: {
json: jsonData
},
dataType:'json',
success: function (response) {
var trHTML = '';
$.each(response, function (i, item) {
//alert(item.children);
$.each(item.Children, function(j, child) {
trHTML += '<tr><td>' + child.Name + '</td>';
});
});
$('#records_table').append(trHTML);
}
});

Please see following JSFiddle http://jsfiddle.net/s701aduz/
var jsonData = '[{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}]';
$.ajax({
url: '/echo/json/',
type: 'POST',
data: {
json: jsonData
},
dataType:'json',
success: function (response) {
var trHTML = '';
$.each(response, function (i, item) {
trHTML += '<tr>';
$.each(item.Children, function(j, child) {
trHTML += '<tr><td>' + child.Name + '</td>';
});
trHTML += '</tr>';
});
$('#records_table').append(trHTML);
}
});
The problem you had was that item.Children was an array itself so when you included that in the string it would simply output [object Object], you have to iterate over the children as well. Also make a row for each element in the response and a td for each child, or at least I'm guessing that's what you were intending.

var json_data = $.parseJSON(response);
var table = $('<table>');
$.each(json_data,function(index,obj){
var tr = $('<tr>');
$.each(obj.Children,function(_index,_children){
var td = $('<td>');
$(td).text(_children.Name);
$(tr).append(td);
})
$('#records_table').append(tr);
});

var jsonData = [{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},
{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}
];
$.each(jsonData, function (i, item) {
if(i == 0) {
$('#records_table').find('th:first').html(item.Parent);
} else {
$('#records_table').find('th:last').after('<th>'+ item.Parent +'</th>');
}
$.each(item.Children, function(j, child){
if(i==0) {
var tr = $('<tr />');
var td = $('<td />');
$(td).text(child.Name);
$(tr).append(td);
$('#records_table').append( tr );
} else {
var td = $('<td />');
$(td).text(child.Name);
$('#records_table').find('tr:eq('+(j+1)+')').append( td );
}
})
});
Check it will help you
http://jsfiddle.net/tqyn3/338/

Related

dynamic select option and dynamic data from php

I tried develop add several selectbox dynamically and get data from selectbox my codes:
this codes add new selectbox and work
var y = 1;
var z = 1;
$('#add_kind').on('click', function () {
var html = '';
html += '<div class="prInput-row">';
html += '<select name="kind_id" class="halfselect kinds">';
html += '<option value="0">Kinds</option>';
html += '<?php foreach($kinds as $kind): ?>';
html += '<option value="<?php echo $kind->id;?>"><?php echo $kind->name;?></option>';
html += '<?php endforeach; ?>';
html += '</select>';
html += '<select name="kind_desc_id" class="halfselect kind_descriptions">';
html += '<option value="0">Kind Descriptions/option>';
html += '</select>';
html += '<input type="text" name="stock_piece" class="halfselect" placeholder="Stock Piece"/>';
html += '</div>';
$('#kind_area').append(html);
$('.kinds').each(function () {
$(this).attr('class', 'halfselect kinds_'+y);
y++;
});
$('.kind_descriptions').each(function () {
$(this).attr('class', 'halfselect kind_descriptions_'+z);
z++;
});
});
$('.kinds').each(function () {
$(this).attr('class','halfselect kinds_'+y);
y++;
});
$('.kind_descriptions').each(function () {
$(this).attr('class','halfselect kind_descriptions_'+z);
z++;
});
this codes get data from db and not work,
var i = 1;
$(".kinds_"+i).on('change', function() {
var kindID = $(this).val();
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
i++;
});
how can change those codes and how can get dynamically datas
this picture my example

#anon, I solved thank you so much but 2 times write codes but how can write one time ?
$("#add_kind").click(function(){
$.each($("[class*='kinds_']"), function() {
$(this).on('change', function() {
var kindID = $(this).val();
var i = $(this).attr("class").substr(-1, 1);
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
});
});
});
$.each($("[class*='kinds_']"), function() {
$(this).on('change', function() {
var kindID = $(this).val();
var i = $(this).attr("class").substr(-1, 1);
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
});
});

you can get all element that have class started with "kinds_" with selector $("[class^=kinds_]") then do a loop to get your class index. So maybe something like this will work:
$.each($("[class^='kinds_']"), function() {
var selector = "."+$(this).attr("class");
$(document).on('change', selector, function() {
var kindID = $(this).val();
var i = $(this).attr("class").substr(-1, 1);
if(kindID) {
$.ajax({
type: "POST",
url: baseUrl+"products/getSelectedKind",
data: 'kind_id='+kindID,
success: function(data) {
$('.kind_descriptions_'+i).html(data);
}
});
} else {
$('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
}
});
})

Display data in Div from json in jquery

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.

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>

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>

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>

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>

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>

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.

ajax / codeigniter out put create a new row every 4 columns

In the success part of my ajax each result gets put into columns.
What I am trying to achive is every 4 columns it will create a new row.
Question: On success part of ajax how to make it so every after every 4 columns will create a new row?
<script type="text/javascript">
$("#select_category").on('keyup', function(e) {
$.ajax({
type: "POST",
url: "<?php echo base_url('questions/displaycategories');?>",
data: {
category: $("#select_category").val()
},
dataType: "json",
success: function(json){
list = '';
list += '<div class="row">';
$.each(json['categories'], function(key, value ) {
list += '<div class="col-sm-3">';
list += value['name'];
list += '</div>';
});
list += '</div>';
$('.category-box').html(list);
}
});
});
</script>

You could just count how many you've added and insert a new row each time it reaches 4:
$("#select_category").on('keyup', function(e) {
$.ajax({
type: "POST",
url: "<?php echo base_url('questions/displaycategories');?>",
data: {
category: $("#select_category").val()
},
dataType: "json",
success: function(json) {
var list = '<div class="row">';
var index = 0;
$.each(json['categories'], function(key, value) {
list += '<div class="col-sm-3">';
list += value['name'];
list += '</div>';
index++;
if(index === 4) {
list += '</div><div class="row">';
index = 0;
}
});
list += '</div>';
$('.category-box').html(list);
}
});
});

Try this:
success: function(json){
list = '';
var cnt = 0;
list += '<div class="row">';
$.each(json['categories'], function(key, value ) {
list += '<div class="col-sm-3">';
list += value['name'];
list += '</div>';
cnt++;
if(!cnt%4){
list += '</div><div class="row">';
cnt = 0;
}
});
list += '</div>';
$('.category-box').html(list);
}

Set JSON values to HTML Table in Java Script?

function loadUserTable(userType){
$.ajax({
type: "POST",
url: "loadUserTable.html",
data: "userType=" + userType,
success: function(response){
alert(response);
},
});
}
Im still working on it,
I print alert for output and got as below
[{
"userId":1,
"email":"santosh.jadi95#gmail.com",
"mobile":"9900082195",
"gender":"male",
"qualification":"1",
"dob":"2016-01-01",
"login":{
"loginId":1,
"userName":"santosh",
"password":"santosh",
"userType":"admin"
}
}]
I want the above JSON values in an HTML Table, is it Possible?
If yes, then i just want to know that, how it can be done?

Got the Solution,, Thank u all for the kind support
function loadUserTable(userType){
$.ajax({
type: "POST",
url: "loadUserTable.html",
data: "userType=" + userType,
success: function(response){
var obj = JSON.parse(response);
$("#tableId").html("");
var tr+="<tr><th>User ID</th><th>User Name</th></tr>";
for (var i = 0; i < obj.length; i++){
tr+="<tr>";
tr+="<td>" + obj[i].userId + "</td>";
tr+="<td>" + obj[i].login.userName + "</td>";
tr+="</tr>";
}
$("#tableId").append(tr);
}
});
}

Yes it is possible. if you want to print json data in simple html table then just iterate (use loop) till your json length and construct your table inside loop.
But i will suggest you to use dataTable / bootstrap table plugin there you just need to pass json at the initialization time.
for Example,
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].User_Name + "</td>");
tr.append("<td>" + json[i].score + "</td>");
tr.append("<td>" + json[i].team + "</td>");
$('table').append(tr);
}
});
});

You'd simple just create a for loop inside success as following:
the obj[i] down below is just a placeholder. You'd have to get the correct value you want to place there.
HTML table container:
<div id="tableContainer">
<table>
<tbody class="tableBody">
<tbody>
</table>
</div>
JSON to append to table:
function loadUserTable(userType)
{
var TableHTML = '';
$.ajax({
type: "POST",
url: "loadUserTable.html",
data: "userType=" + userType,
success: function(response){
alert("eeee: "+response);
var obj = JSON.parse(response);
for (i = 0; i < obj.length; i++)
{
TableHTML += '<tr><td>' + obj[i].userId + '</td></tr>';
}
},
});
$(".tableBody").append(TableHTML);
}

Adding JSON data to table in AJAX

Ok i have some search results from input box. I used keyup to get results. Then tis results send to AJAX, and i want to append it to table. My problem is because i use append i will get more than one table headers if i have more results, on the other side i cant use html() because script use for loop so i will only get one result. Can someone help me to solve this problem. I try something like this...
$("#search").keyup(function ()
{
var value = $(this).val(); // varijabla iz input polja
// provera za minimalnu duzinu pretrage
if(value.length > 3)
{
$.ajax({
type: "POST",
url: "crud/searching/",
data: { 'var' : value },
dataType: "json",
success: function(response)
{ alert(response);
$('#warning').html(response.msg);;
$('#result').html('');
for(var i=0; i<response.result.length; i++) //petlja za pristup json
{
$('#result').append('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody><tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr> </tbody></table> ' );//dodavanje rezultata u div
}
}
})
}
});

Just create the table once and then append trs in the loop to its tbody
$('#warning').html(response.msg);
if (response.result.length) {
var $table = $('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody></tbody></table>').appendTo($('#result').html(''));
var $tbody = $table.find('tbody');
for (var i = 0; i < response.result.length; i++) //petlja za pristup json
{
$tbody.append('<tr><td>' + response.result[i].id + '</td><td>' + response.result[i].naslov + '</td><td>' + response.result[i].autor + '</td><td>' + response.result[i].cena + '</td><td>' + response.result[i].valuta + '</td></tr> '); //dodavanje rezultata u div
}
} else {
$('#result').html('')
}

Try this :
$("#search").keyup(function ()
{
var value = $(this).val(); // varijabla iz input polja
// provera za minimalnu duzinu pretrage
if(value.length > 3)
{
$.ajax({
type: "POST",
url: "crud/searching/",
data: { 'var' : value },
dataType: "json",
success: function(response)
{ alert(response);
$('#warning').html(response.msg);
// Store jQuery objects if used more than once
var $table = $('<table class="page-list">').appendTo($('#result')),
$thead = $('<thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead>').appendTo($table),
$tbody = $('<tbody>').appendTo($table);
innerHTML = '';
for(var i=0; i<response.result.length; i++) //petlja za pristup json
{
innerHTML += '<tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr>' );//dodavanje rezultata u div
}
// Append to HTML only once, when you have the full HTML to append
$tbody.append(innerHTML);
}
})
}
});

Develop Reference

JavaScript is the programming language of the Web.

Update html table according to ajax json response - javascript

var json_data = $.parseJSON(response); var table = $('<table>'); $.each(json_data,function(index,obj){ var tr = $('<tr>'); $.each(obj.Children,function(_index,_children){ var td = $('<td>'); $(td).text(_children.Name); $(tr).append(td); }) $('#records_table').append(tr); });

Related

dynamic select option and dynamic data from php

Display data in Div from json in jquery

ajax / codeigniter out put create a new row every 4 columns

Set JSON values to HTML Table in Java Script?

Adding JSON data to table in AJAX

Categories

Resources