We Keep Coding

how to create a hierarchy table with parent child rows razor

here is my table snap enter image description here
I am creating this table from my model in razor view
it shows the structure of task and sub-tasks and their subtask ...
but the problem is it loads sub task and their subtask ... in the same level when someone clicks on the first column it loads its child under the parent
it's loads them and add a table row under the correspondence row
here is my jquery code I want to make it hierarchical like there should be a difference in parent and child level
function showHierarchy(taskId) {
if ($('.subtaskof_' + taskId).text() == '') {
$.ajax('/Tasks/sfsubtasks?taskId=' + taskId, // request url
{
async: false,
success: function (data, status, xhr) {// success callback function
var subtasklist = JSON.parse(data)
console.log(subtasklist);
for (i = 0; i < subtasklist.length; i++) {
subtask = subtasklist[i];
var therowis = '<tr class=subtaskof_' + taskId + '>'
+ '<td id="subtaskrow_' + subtask['InstanceId'] + '" align="right">_</td>'
+ '<td>' + subtask['InstanceId'] + '</td>'
+ '<td>' + subtask["Title"] + '</td>'
+ '<td>' + subtask["Deliverables"] + '</td>'
+ '<td>' + subtask["StartDate"] + '</td>'
+ '<td>' + subtask["Priority"] + '</td>'
+ '<td>' + subtask["State"] + '</td>'
+ '<td>See Details_subt</td>'
+ '<td>Add Sub Task_subt</td>'
+ '</tr>'
// Find position to add new subtask row in the Task table
$("#my-grid tr").filter(function () {
if ($(this).text().indexOf(taskId) >= 0) {
$(this).after(therowis);
issubsubtaskexists = false;
console.log("chield checking for - " + subtask['InstanceId'])
$.ajax('/Tasks/sfsubtasks?taskId=' + subtask['InstanceId'], // request url
{
async: false,
success: function (data_, status_, xhr_) {
if (data_.length > 0) {
console.log("The data_ is - " + data_);
var subsubtasklist = JSON.parse(data_);
console.log("The subsubtasklist is - " + subsubtasklist)
console.log("lenght for - " + subtask['InstanceId'] + " , is - " + subsubtasklist);
if (subsubtasklist.length > 0) {
$('#subtaskrow_' + subtask['InstanceId']).html("<b><a style='font-size:25px; padding-left:17px;' id='lnk_" + subtask['InstanceId'] + "' href='#' onclick='showHierarchy(" + subtask['InstanceId'] + ")'> + </a></b>")
issubsubtaskexists = true;
}
}
}
});
console.log("The taskId is - "+taskId)
$('#lnk_' + taskId).html('<b>_</b>');
}
});
}
}
});
} else {
// Toggle/removing subtasks
$('.subtaskof_' + taskId).remove();
$.ajax('/Tasks/sfsubtasks?taskId=' + taskId,
{
success: function (data, status, xhr) {
console.log("Checking for child node of taskId - " + taskId);
var subsubtasklist = JSON.parse(data)
console.log(subsubtasklist);
for (i = 0; i < subsubtasklist.length; i++) {
$('.subtaskof_' + subsubtasklist[i]['InstanceId']).remove();
$.ajax('/Tasks/sfsubtasks?taskId=' + subsubtasklist[i],
{
success: function (data, status, xhr) {
console.log("Checking for child node of taskId - " + taskId);
var subsubtasklist_ = JSON.parse(data)
console.log(subsubtasklist_);
for (j = 0; j < subsubtasklist_.length; j++) {
$('.subtaskof_' + subsubtasklist_[j]['InstanceId']).remove();
}
}
});
}
}
});
$('#lnk_' + taskId).html('<b>+</b>');
}
}
plz let me know what can be done of this table for showing data hierarchically

Getting values from an api call

Hi all i have a url with returns values (https://api.sunrise-sunset.org/json?lat=35.857368&lng=14.477653). I would like to get the values of sunset and sunrise. The code I am trying is the following but for some reason nothing is happening. Seems that I cannot access 'second level'
$.getJSON('https://api.sunrise-sunset.org/json?lat=35.857368&lng=14.477653', function (data) {
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].results[0].sunrise + "</td>");
tr.append("<td>" + data[i].sunset + "</td>");
$('table').append(tr);
}});
Can someone please help me? thanks

Neither the response object nor .results is an array - remove the array indicies.
const tr = $('tr');
$.getJSON('https://api.sunrise-sunset.org/json?lat=35.857368&lng=14.477653', function (data) {
console.log(data.results.sunrise + ' :: ' + data.results.sunset);
tr.append("<td>" + data.results.sunrise + "</td>");
tr.append("<td>" + data.results.sunset + "</td>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr></tr></table>

How to sum Total JSON Results?

i have this script to take data from JSON Results, also this script filter results by ID
$(document).ready(function () {
//Call EmpDetails jsonResult Method
$.getJSON("/smetkis/getTrosokList",
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
if (json[i].skID == '#Html.DisplayFor(model => model.smID)') {
tr = $('<tr />');
tr.append("<td >" + json[i].Artikal + "</td>");
tr.append("<td>" + json[i].kol + "</td>");
tr.append("<td>" + json[i].cena + "</td>");
tr.append($('<td class="vkupno1">' + json[i].vkupnot + '</td>'));
$('table').append(tr);
}
}
});
});
Also i have this script sor SUM Of column with class vkupno1, but not understand the results from cell.
$(document).ready(function () {
colSum();
});
function colSum() {
var sum = 0;
$(".vkupno1").each(function () {
sum += parseFloat($(this).text());
});
$('#result').html((sum).toFixed(2).replace(/(\d)(?=(\d{6})+(?!\d))/g, "$1.") + " €");
}
How to sum (json[i].vkupnot)-value or cell classed "vkupno1"
here is JSON Results:
[{"smetki":null,"trId":1,"skID":1,"Artikal":"gdfgsdgfdg","kol":4.00,"cena":4.00,"vkupnot":16.00},{"smetki":null,"trId":4,"skID":4,"Artikal":"kjhkjhkjhk","kol":7.00,"cena":7.00,"vkupnot":47.00},{"smetki":null,"trId":5,"skID":4,"Artikal":"lkjlkjlk","kol":8.00,"cena":8.00,"vkupnot":64.00},{"smetki":null,"trId":6,"skID":5,"Artikal":"gdfg","kol":5.00,"cena":5.00,"vkupnot":25.00},{"smetki":null,"trId":7,"skID":6,"Artikal":"gdfg","kol":5.00,"cena":5.00,"vkupnot":25.00},{"smetki":null,"trId":8,"skID":7,"Artikal":"gagaggag","kol":5.00,"cena":55.00,"vkupnot":275.00},{"smetki":null,"trId":9,"skID":7,"Artikal":"ggg","kol":4.00,"cena":65.00,"vkupnot":260.00}]

You can add the values from response itself without reading from DOM.
Try this
$(document).ready(function() {
//Call EmpDetails jsonResult Method
$.getJSON("/smetkis/getTrosokList",
function(json) {
var tr;
var sum = 0; //initialising sum
for (var i = 0; i < json.length; i++) {
if (json[i].skID == '#Html.DisplayFor(model => model.smID)') {
tr = $('<tr />');
tr.append("<td >" + json[i].Artikal + "</td>");
tr.append("<td>" + json[i].kol + "</td>");
tr.append("<td>" + json[i].cena + "</td>");
tr.append($('<td class="vkupno1">' + json[i].vkupnot + '</td>'));
$('table').append(tr);
sum += parseFloat(json[i].vkupnot); //adding directly from the response
}
}
$('#result').html((sum).toFixed(2).replace(/(\d)(?=(\d{6})+(?!\d))/g, "$1.") + " €");
});
});
And you need to wait for the response before reading the dynamically created DOM elements.

How to make sure another (new) page is not shown when submitting a form

For an assignment I need to have a table made up of JSON data gotten from a server through an AJAX GET request. Also I have to have an extra row to be able to fill in some extra data as well, this data has to be added to the server where I make the AJAX GET request from, I do this by using an AJAX POST request. Both things I have been able to do, so I now have a table which shows the data from the server which you can also add data to as well. But the problem is that when I click the 'submit' button another page will load showing a new URL made for the added data to the server. I only want to add the data to the table, without opening a new page. I have seen some answers on this with <form> tags, but since I have to use a <form> tag I can not use another one inside.
How is this possible by using a <input> tag and button?
This is the code in HTML I have for the row to fill in your own data.
<tr>
<td rowspan="1" colspan="1">
<input type="text" name="name" placeholder="Name" required="">
</td>
<td rowspan="1" colspan="1">
<input type="text" name="category" placeholder="Category" required="">
</td>
<td rowspan="1" colspan="1">
<input type="number" name="amount" min="1" placeholder="Amount" required="">
</td>
<td rowspan="1" colspan="1">
<input type="text" name="location" placeholder="Location" required="">
</td>
<td rowspan="1" colspan="1">
<input type="date" name="date" min="2000-01-02" required="">
</td>
</tr>
</tfoot>
</table>
<input type="submit" value="Submit" id="submit">
</form>
And this is the code in JavaScript for adding the data from the server to the table:
$(function func(json) {
var url = '%url%'
$.ajax({
type: "get",
url: '%url%',
dataType: "jsonp",
});
$.getJSON(url,
function(data){
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].name + "</td>");
tr.append("<td>" + data[i].category + "</td>");
tr.append("<td>" + data[i].amount + "</td>");
tr.append("<td>" + data[i].location + "</td>");
tr.append("<td>" + data[i].date + "</td>");
$('#table_one').append(tr);
}
});
});
I hope I have provided enough information, and thanks in advance for the help :)
EDIT:
I edited the code to solve this, now it looks like this:
var url = '%url%
var tabinithtml = '';
function fillTable() {
$('#table_one').html(tabinithtml);
$.getJSON(url,
function(data){
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].name + "</td>");
tr.append("<td>" + data[i].category + "</td>");
tr.append("<td>" + data[i].amount + "</td>");
tr.append("<td>" + data[i].location + "</td>");
tr.append("<td>" + data[i].date + "</td>");
tr.sort
$('#table_one').append(tr);
}
});
}
function insertRecord() {
$.post( url, $( "#form" ).serialize()
);
}
$( document ).ready(function() {
tabinithtml = $('#table_one').html();
fillTable();
$('#form').submit(function(e) {
e.preventDefault();
insertRecord();
fillTable();
return false;
});
});

You have to prevent form submission by using
$("form").submit(function(){ return false; });

Just add
return false;
before the function ends
For example:
function(){
//all function srcripts
return false;
}
In your case, it should be like this:
function(data){
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].name + "</td>");
tr.append("<td>" + data[i].category + "</td>");
tr.append("<td>" + data[i].amount + "</td>");
tr.append("<td>" + data[i].location + "</td>");
tr.append("<td>" + data[i].date + "</td>");
$('#table_one').append(tr);
return false;
}

you can make sure the form doesn't actually submit to "url given" by preventing the default behavior, but you'll have to do whatever you want with the form using js/jquery
$('#form').submit(function(e){
e.preventDefault();
//do your stuff here
$.ajax(){
url: '%url%',
method: 'POST',
data: {datafromform}
}.success(msg){
console.log(msg)
}
})
try something like this, you get echo JSON data on the server side, so in PHP for the results you add:
echo $jsonizedData;
die();
so in message, now you will have the json data back from the php file

I have been able to solve this by using this code:
var url = '%url%
var tabinithtml = '';
function fillTable() {
$('#table_one').html(tabinithtml);
$.getJSON(url,
function(data){
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].name + "</td>");
tr.append("<td>" + data[i].category + "</td>");
tr.append("<td>" + data[i].amount + "</td>");
tr.append("<td>" + data[i].location + "</td>");
tr.append("<td>" + data[i].date + "</td>");
tr.sort
$('#table_one').append(tr);
}
});
}
function insertRecord() {
$.post( url,
$( "#form" ).serialize()
);
}
$( document ).ready(function() {
tabinithtml = $('#table_one').html();
fillTable();
$('#form').submit(function(e) {
e.preventDefault();
insertRecord();
fillTable();
return false;
});
});

Ordering JSON data in a table

I am creating a "leaderboard" page as an external component to a Facebook game.
Basically the app is passing me data through a given JSON response file ('score.json' which contains data objects with three keys: Name, Team, Score), and I am parsing this into an HTML table using the code below:
$(document).ready(function(){
$.getJSON("score.json",
function (data) {
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].User_Name + "</td>");
tr.append("<td>" + data[i].score + "</td>");
tr.append("<td>" + data[i].team + "</td>");
$('table').append(tr);
}
});
});
What I need to do:
Display these table rows in descending order based on the "score" value.
Add a "rank" column with a dynamically generated number inserted with each row
I am just a beginner with JavaScript so any help would be much appreciated.
EDIT: Solved. Final code below:
$(document).ready(function(){
$.getJSON("score.json",
function (data) {
var tr;
data.sort(function(a,b) { return parseFloat(b.score) - parseFloat(a.score) } );
var rank = 1;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + rank + "</td>");
tr.append("<td>" + data[i].User_Name + "</td>");
tr.append("<td>" + data[i].score + "</td>");
tr.append("<td>" + data[i].team + "</td>");
$('table').append(tr);
rank = rank +1;
}
});
});

you can use this to sort your array :
json.sort(function(a,b) { return parseFloat(b.score) - parseFloat(a.score) } );
Here is the jsFiddle.