admin管理员组文章数量:1426458
Can you please help me to figure it out how to append reciving data from Ajax into a tbody of an existing table?
In my HTML I have a Table Like:
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th valign="middle" class="c-font">Projects </th>
<th valign="middle" class="c-font">Road Length (Km)</th>
<th valign="middle" class="c-font">Powerline Length (Km)</th>
<th valign="middle" class="c-font">Penstock (Km)</th>
<th valign="middle" class="c-font">Installed Capacity (MW)</th>
<th valign="middle" class="c-font">Annual Firm Energy (GW/h)</th>
<th valign="middle" class="c-font">Cost of Energy ($/MWh)</th>
<th valign="middle" class="c-font">Footprint (Km)</th>
<th valign="middle" class="c-font">Cost Per Year ($)</th>
</tr>
</thead>
<tbody> </tbody>
</table>
and js file is like
request.done(function(data) {
console.log(data);
});
which the output in console looks like
these are the values to be place in the >tr><td></td></tr>
AnnualFirmEnergy: "91.2335550"
CostOfEnergy: "183.835765"
CostPerYear: "16771990.38"
Footprint: "182.3077770"
InstalledCapacity: "31.320802"
Penstock: "5000.000000"
PowerLineLength: "37.384781"
ProjectID: "12910"
RoadLength: "29.350976"
Can you please help me to figure it out how to append reciving data from Ajax into a tbody of an existing table?
In my HTML I have a Table Like:
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th valign="middle" class="c-font">Projects </th>
<th valign="middle" class="c-font">Road Length (Km)</th>
<th valign="middle" class="c-font">Powerline Length (Km)</th>
<th valign="middle" class="c-font">Penstock (Km)</th>
<th valign="middle" class="c-font">Installed Capacity (MW)</th>
<th valign="middle" class="c-font">Annual Firm Energy (GW/h)</th>
<th valign="middle" class="c-font">Cost of Energy ($/MWh)</th>
<th valign="middle" class="c-font">Footprint (Km)</th>
<th valign="middle" class="c-font">Cost Per Year ($)</th>
</tr>
</thead>
<tbody> </tbody>
</table>
and js file is like
request.done(function(data) {
console.log(data);
});
which the output in console looks like
these are the values to be place in the >tr><td></td></tr>
AnnualFirmEnergy: "91.2335550"
CostOfEnergy: "183.835765"
CostPerYear: "16771990.38"
Footprint: "182.3077770"
InstalledCapacity: "31.320802"
Penstock: "5000.000000"
PowerLineLength: "37.384781"
ProjectID: "12910"
RoadLength: "29.350976"
4 Answers
Reset to default 2Try using $.each()
request.done(function(data) {
$.each(data, function(key, value) {
var tr = $("<tr />")
$.each(value, function(k, v) {
tr.append(
$("<td />", {
html: v
})[0].outerHTML
);
$("table tbody").append(tr)
})
})
});
jsfiddle https://jsfiddle/11p7e3z6/
Let me show two basic principles of access to elements of json array. Those principles are shown in code below - please read my ments. I suppose it will be useful for our munity.
var data = {1:{AnnualFirmEnergy: "91.2335550",
CostOfEnergy: "183.835765",
CostPerYear: "16771990.38",
Footprint: "182.3077770",
InstalledCapacity: "31.320802",
Penstock: "5000.000000",
PowerLineLength: "37.384781",
ProjectID: "12910",
RoadLength: "29.350976"},2:{AnnualFirmEnergy: "91.2335550",
CostOfEnergy: "183.835765",
CostPerYear: "16771990.38",
Footprint: "182.3077770",
InstalledCapacity: "31.320802",
Penstock: "5000.000000",
PowerLineLength: "37.384781",
ProjectID: "12910",
RoadLength: "29.350976"},3:{AnnualFirmEnergy: "91.2335550",
CostOfEnergy: "183.835765",
CostPerYear: "16771990.38",
Footprint: "182.3077770",
InstalledCapacity: "31.320802",
Penstock: "5000.000000",
PowerLineLength: "37.384781",
ProjectID: "12910",
RoadLength: "29.350976"}}
for(var i in data) //i = 1, 2, 3 ...
{
var rn = $('<tr class=""></tr>');
//first approach to add data (not flexible)
rn.append('<td>'+data[i].ProjectID+'</td>');
rn.append('<td>'+data[i].RoadLength+'</td>');
rn.append('<td>'+data[i].PowerLineLength+'</td>');
// here add all columns
$('#example').append(rn);
//second - right - approach to add data.
//in this casу data in your JSON array
//have had order like your table head arrangement
var rd = $('<tr class=""></tr>');
var o=data[i];
for(var j in o)//j='AnnualFirmEnergy', ...
{
rd.append('<td>'+o[j]+'</td>');
$('#example').append(rd);
}
}TABLE {
width: 300px;
border: 1px solid black;
border-bottom: none;
}
TD, TH {
padding: 3px;
}
TH {
text-align: left;
background: black;
color: white;
border: 1px solid white;
}
TD {
border-bottom: 1px solid black;
}<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" >
<thead>
<tr>
<th valign="middle" class="c-font">Projects </th>
<th valign="middle" class="c-font">Road Length (Km)</th>
<th valign="middle" class="c-font">Powerline Length (Km)</th>
<th valign="middle" class="c-font">Penstock (Km)</th>
<th valign="middle" class="c-font">Installed Capacity (MW)</th>
<th valign="middle" class="c-font">Annual Firm Energy (GW/h)</th>
<th valign="middle" class="c-font">Cost of Energy ($/MWh)</th>
<th valign="middle" class="c-font">Footprint (Km)</th>
<th valign="middle" class="c-font">Cost Per Year ($)</th>
</tr>
</thead>
<tbody> </tbody>
</table> If you don't use some kind of templating engine for cloning the data into the DOM, you'll very soon descend into a labyrinth of messy unmaintainable code.
Below is an example using the dna.js engine, a library I contribute to, but the approach is pretty mon. The basic idea is to define data fields in the HTML and then pass the JSON data to the engine for cloning.
HTML
<table id=example>
<thead>
<tr>
<th>Projects</th>
<th>Road Length (Km)</th>
<th>Powerline Length (Km)</th>
<th>Penstock (Km)</th>
</tr>
</thead>
<tbody>
<tr id=energy>
<td>~~AnnualFirmEnergy~~</td>
<td>~~CostOfEnergy~~</td>
<td>~~CostPerYear~~</td>
<td>~~Footprint~~</td>
</tr>
</tbody>
</table>
...
<script src=https://cdn.jsdelivr/jquery/3.2/jquery.min.js></script>
<script src=https://cdn.jsdelivr/dna.js/1.2/dna.min.js></script>
JavaScript
function handle(data) { dna.clone('energy', data); }
request.done(handle);
Yep, it's that simple. Note that there is no HTML in the JS, so the JS is easier to maintain and the HTML is easier to style.
Fiddle with the code:
http://jsfiddle/tw37poyw/2
var data = {1:{AnnualFirmEnergy: "91.2335550",
CostOfEnergy: "183.835765",
CostPerYear: "16771990.38",
Footprint: "182.3077770",
InstalledCapacity: "31.320802",
Penstock: "5000.000000",
PowerLineLength: "37.384781",
ProjectID: "12910",
RoadLength: "29.350976"},2:{AnnualFirmEnergy: "91.2335550",
CostOfEnergy: "183.835765",
CostPerYear: "16771990.38",
Footprint: "182.3077770",
InstalledCapacity: "31.320802",
Penstock: "5000.000000",
PowerLineLength: "37.384781",
ProjectID: "12910",
RoadLength: "29.350976"},3:{AnnualFirmEnergy: "91.2335550",
CostOfEnergy: "183.835765",
CostPerYear: "16771990.38",
Footprint: "182.3077770",
InstalledCapacity: "31.320802",
Penstock: "5000.000000",
PowerLineLength: "37.384781",
ProjectID: "12910",
RoadLength: "29.350976"}}
for(var i in data) //i = 1, 2, 3 ...
{
var rn = $('<tr class=""></tr>');
//first approach to add data (not flexible)
rn.append('<td>'+data[i].ProjectID+'</td>');
rn.append('<td>'+data[i].RoadLength+'</td>');
rn.append('<td>'+data[i].PowerLineLength+'</td>');
// here add all columns
$('#example').append(rn);
//second - right - approach to add data.
//in this casу data in your JSON array
//have had order like your table head arrangement
var rd = $('<tr class=""></tr>');
var o=data[i];
for(var j in o)//j='AnnualFirmEnergy', ...
{
rd.append('<td>'+o[j]+'</td>');
$('#example').append(rd);
}
}TABLE {
width: 300px;
border: 1px solid black;
border-bottom: none;
}
TD, TH {
padding: 3px;
}
TH {
text-align: left;
background: black;
color: white;
border: 1px solid white;
}
TD {
border-bottom: 1px solid black;
}<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" >
<thead>
<tr>
<th valign="middle" class="c-font">Projects </th>
<th valign="middle" class="c-font">Road Length (Km)</th>
<th valign="middle" class="c-font">Powerline Length (Km)</th>
<th valign="middle" class="c-font">Penstock (Km)</th>
<th valign="middle" class="c-font">Installed Capacity (MW)</th>
<th valign="middle" class="c-font">Annual Firm Energy (GW/h)</th>
<th valign="middle" class="c-font">Cost of Energy ($/MWh)</th>
<th valign="middle" class="c-font">Footprint (Km)</th>
<th valign="middle" class="c-font">Cost Per Year ($)</th>
</tr>
</thead>
<tbody> </tbody>
</table> 本文标签： javascriptHow To Append Ajax Response (Array Of Objects) To Tbody of A TableStack Overflow
版权声明：本文标题：javascript - How To Append Ajax Response (Array Of Objects) To Tbody of A Table - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745423100a2657991.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论