We Keep Coding

How to get the sum of items inside an `innerText` from a table that was created in AJAX?

I have a code that adds rows to a table from items in a database using AJAX. That part works fine but I need to calculate the sum off the the numbers in the rows that I created, but for some reason everything I tried didnt work.
My code :
$.ajax({
type: "GET",
url: "http://localhost:8080/api/001,
dataType: "json",
success: function(data) {
for (var count = 0; count < data.length; count++) {
$('<tr>').append(
$('<td>').text(dateArray[0]),
$('<td class="duration">').text(dateArray[1]),
).appendTo('#testtable');
},
error: function(jqXHR, textStatus, errorThrown) {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testtable">
<tr>
<th>Date</th>
<th>Duration</th>
</tr>
This successfully insert the data to the table, but I'm trying to get the sum of Duration but can't seem to get it to work. Any tips?

when you create the table you should give each the "duration" class, then iterate through each element and store the value as an int. then sum up those values.
for example :
<table id="testtable">
<tr>
<th>Date</th>
<th>Duration</th>
</tr>
<tr class="duration"><td >5</td><td class="duration">5</td></tr>
</table>
<script>
jQuery(document).ready(function(){
// Loop through each div element with the class box
total =0;
$(".duration").each(function(){
stringval = jQuery(this).text();
num = parseInt(stringval);
total += num;
;
});
console.log(total);
});'''
</script>
This will return 10

Ajax - json, failing to create table

Trying to get data from https://api.quarantine.country/api/v1/summary/latest However my table isn't getting built.
My HTML table
<tr class="table"></tr>
<th>Contry name</th>
<th>Total infected</th>
<th>Recovered</th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
My script
<script>
var myArray = []
$.ajax({
method: 'GET',
url: 'https://api.quarantine.country/api/v1/summary/latest',
success: function(response) {
myArray = response.data.regions
console.log(myArray)
buildTable(myArray)
}
})
function buildTable(data) {
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++) {
var row = `<tr>
td${data[i].name}td
td${data[i].total_cases}td
td${data[i].recovered}td
</tr>`
table.innerHTML += row
}
}
</script>
I get data.regions on my console however, it seems like im unable to read through the objects using the buildTable() function. Cant figure out why.

data is not array it is an object so need to get all keys of the object
var myArray = []
$.ajax({
method: 'GET',
url: 'https://api.quarantine.country/api/v1/summary/latest',
success: function(response) {
myArray = response.data.regions
// console.log(myArray)
buildTable(myArray)
}
})
function buildTable(data) {
var table = document.getElementById('myTable');
Object.keys(data).forEach(function (item) {
var row = `<tr>
<td>${data[item].name}</td>
<td>${data[item].total_cases}</td>
<td>${data[item].recovered}</td>
</tr>`
table.innerHTML += row
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr class="table">
<th>Contry name</th>
<th>Total infected</th>
<th>Recovered</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Ajax call returns Object(object), how to get the value from it

JSP file
<div class="container">
<table id="headerTable" class="table table-bordered">
<thead>
<tr>
<th colspan="2">Header</th>
</tr>
</thead>
<tbody>
<c:forEach items="${headerList}" var="field">
<tr>
<th>${field}</th>
<td><input id="${field}" type="text" class="form-control "></td>
</tr>
</c:forEach>
</tbody>
</table>
Javascript
$('#parseBtn').click(function() {
var parseMsg = $('#msgText').val();
alert("parse message is " + parseMsg);
$.ajax({
type: "GET",
url: "/parseMessage",
data: {
"msg": parseMsg
},
success: function(data) {
//data format looks like Object {SubsystemChannel: "F", MessageNumber: "200257", DebugQueue: " ", WorkStationNumber: "023", FrontEndNumber: "0000"…}
$('#headerTable input').each(function() {
var id = $(this).attr('id');
var field = data.id;
$(this).val(field);
});
}
});
});
What I am going to do is, go through the $('#headerTable input'), set the value(from data) in it. So, I get the each input id first, then get the value from data using id, but it failed.... Could you help me on this? thank you very much

You should use Bracket notation instead of dot notation to access properties using id variable
$('#headerTable input').each(function () {
var field = data[$(this).attr('id')];
$(this).val(field);
});

Add Link Column to DataTable After Ajax Call MVC

On my view page I have a table (from a partial view) and a form. I am using ajax to submit the form to my webapi controller.
On success I would like to add what was entered in the textbox to the first column, and links to Edit and Delete in the second column of a new row.
As of right now I am only working on the Edit link.
Here is my partial view table:
<table id="Table" class="table table-bordered">
<thead>
<tr>
<th class="col-md-6">
#Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
</thead>
#foreach (var item in Model)
{
<tr>
<td class="col-md-6">
#Html.DisplayFor(modelItem => item.Admin)
</td>
<td class="col-md-6">
#Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
Here is my form jquery.ajax:
var table = $("#Table").DataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [1] },
{ "bSearchable": false, "aTargets": [1] }
]
});
$("form").submit(function(e) {
e.preventDefault();
$.ajax({
url: infoGetUrl,
method: "post",
data: $("form").serialize()
}).success(function (data) {
var editLink = document.createElement('a');
editLink.href = "/controllerName/Edit/" + data.id;
editLink.text = "Edit";
table.row.add([
$("#Textbox").val(),
editLink
]).draw();
}).error(function(jqXHR, textStatus, errorThrown) {
console.log("error");
});
});
The problem is that when this renders I get this:
It is not clickable and renders like this:
<tr class="even" role="row">
<td class="sorting_1">John.Doe</td>
<td>http://localhost:61888/controllerName/Edit/15</td>
</tr>
As you can see, it is not rendered in an a tag, and I don't need the http://localhost:61888 part of the link.
How can I resolve this?

try creating link as:
var link = <a href='/controllerName/Edit/' + data.id>EDIT</a>

With pur JS:
var link = document.createElement('a');
link.textContent = 'Edit';
link.href = "/controllerName/Edit/" + data.id;
you just need to place this inside your td.
If you want to remove 'http://localhost:61888' you can just use replace to change your localhost by un empty string. Or split your string and just keep the second part

Unable to add row in the middle of jQuery datatables(with FIDDLE)

I am trying to add new rows to the table using the rows.add() function in the DataTables API. The data is coming from the server using AJAX call.
Here is an example to work upon - FIDDLE
My Table Structure is follows:
<table id="myTable">
<thead>
<th>
Id
</th>
<th>
Name
</th>
<th>
Designation
</th>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#item.Number
</td>
<td>
#item.Name
<img id="imgA" onclick="AddNewRows();" class="iterationChild" src="#Url.Content("~/Images/plus.png")" alt="expand/collapse" />
</td>
<td>
#item.Designation
</td>
</tr>
}
</tbody>
</table>
Corresponding Javascript function:
function AddNewRows() {
$.ajax({
type: 'GET',
url: '#Url.Action("NewRows", "Home")',
dataType: "json",
async: true,
success: function (data) {
var table = $('#myTable').DataTable();
for (var i = 0, l = data.length; i < l; i++) {
//how to add it just after the current row clicked
table.row.add([
data[i].Number,
data[i].Name,
data[i].Designation
]).draw();
}
},
error: function (result) {
alert('error');
}
});
}
I want to be able to add the new row after the row which is clicked. Here it is adding at the end of the table(last rows).

Assuming every row as a unique id, try passing the current row clicked id into your function as a parameter. Example:
function AddNewRows(id) {
var my_row = document.getElementById(id);
...