JavaScript use loop for a complex json - javascript

I am using json.data.schedules[0].liveVideoList , json.data.schedules[1].liveVideoList
, json.data.schedules[2].liveVideoList and so on
Please tell me how can I use loop here to get all path
script.js code
var b = location.search.split('b=')[1];
$.get(
"index2.php",
{ "b": b },
function (data) {
var json = JSON.parse(data);
$.each(json.data.schedules[0].liveVideoList, function (i, v) {
var str = v.thumbnailUrl.split("vi/").pop();
var datee = v.publishDate.slice(0, 9);
var timee = v.publishDate.slice(9, 20);
var tblRows = "<tr>" + "<td>" + v.title + "</td>" + "<td>" + 0 + ' ₹' + "</td>" + "<td>" + datee + "</td>" + "<td>" + timee + "</td>" + "<td><a target='_blank' href='" + str + "'>" + "WATCH/DOWNLOAD" + "</a></td>" + "</tr>";
$(tblRows).appendTo("#userdata");
});
}
);

You can use two loops like this.
$.each(json.data.schedules, function (index, schedule) {
$.each(schedule.liveVideoList, function (i, v) {
var str = v.thumbnailUrl.split("vi/").pop();
var datee = v.publishDate.slice(0, 9);
var timee = v.publishDate.slice(9, 20);
var tblRows = "<tr>" + "<td>" + v.title + "</td>" + "<td>" + 0 + ' ₹' + "</td>" + "<td>" + datee + "</td>" + "<td>" + timee + "</td>" + "<td><a target='_blank' href='" + str + "'>" + "WATCH/DOWNLOAD" + "</a></td>" + "</tr>";
$(tblRows).appendTo("#userdata");
});
});

A for..of loop
for (let schedule of json.data.schedules) {
//Do something with schedule
}
A for..in loop
for (let scheduleIndex in json.data.schedules) {
//Do something with json.data.schedules[scheduleIndex]
}
A for loop
for (let index = 0; index < json.data.schedules.length; index++) {
//Do something with json.data.schedules[index]
}
A while loop
var index = 0;
while (index < json.data.schedules.length) {
//Do something with json.data.schedules[index]
index++;
}

Related

I want to fix the code concisely

var template is used as redundant I want to know how to fix it so you can use this section only once
function pluscal(data) {
var idx = index++
var form = parseInt($("#plusstr1").val()) + $("#plus_op").text() + parseInt($("#plusstr2").val())
var cal = parseInt($("#plusstr1").val()) + parseInt($("#plusstr2").val())
var template = "<tr>" +
"<td>" + idx + "</td>" +
"<td>" + form + "</td>" +
"<td>" + data.result + "</td>" +
"<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
"</tr>"
$("tbody").append(template)
}
and
function minuscal(data) {
var idx = index++
var form = parseInt($("#minusstr1").val()) + $("#minus_op").text() + parseInt($("#minusstr2").val())
var cal = parseInt($("#minusstr1").val()) - parseInt($("#minusstr2").val())
var template = "<tr>" +
"<td>" + idx + "</td>" +
"<td>" + form + "</td>" +
"<td>" + data.result + "</td>" +
"<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
"</tr>"
$("tbody").append(template)
}
Simply separate the logic related to template. Here I have organized it in one function. And I have merged pluscal and minuscal function.
function cal(data, calType) {
// calType need to be either plus or minus
var idx = index++
var form = parseInt($(`#${calType}str1`).val()) + $(`#${calType}_op`).text() + parseInt($(`#${calType}str2`).val())
var cal = parseInt($(`#${calType}str1`).val()) + parseInt($(`#${calType}str2`).val())
generateTemplate(idx, form, cal, data);
}
function generateTemplate(idx, form, cal, data) {
var template = `<tr>
<td> ${idx} </td>
<td> ${form} </td>
<td> ${data.result} </td>
<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>
</tr>`
$("tbody").append(template)
}
Create another function what returns the template
function getTemplate(idx, form, result) {
return "<tr>" +
"<td>" + idx + "</td>" +
"<td>" + form + "</td>" +
"<td>" + result + "</td>" +
"<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
"</tr>";
}
So then you can use like this
function pluscal(data) {
var idx = index++
var form = parseInt($("#plusstr1").val()) + $("#plus_op").text() + parseInt($("#plusstr2").val())
var cal = parseInt($("#plusstr1").val()) + parseInt($("#plusstr2").val())
var template = getTemplate(idx, form, data.result);
$("tbody").append(template)
}
try this
function multiCase(caseType, data) {
if (caseType === 'Maj') {
str1 = "#plusstr1",
str2 = "#plusstr2",
op = "#plus_op"
} else {
str1 = "#minusstr1",
str2 = "#minusstr2",
op = "#minus_op"
}
var idx = index++
var form = parseInt($(str1).val()) + $(op).text() + parseInt($(str2).val())
var cal = parseInt($(str1).val()) + parseInt($(str2).val())
/* And other part of your function
...
...
*/
Hope it helps

one ajax loop with 2 outputs error innerHTML

Having a few issues trying to get this function output to an ajax table (working fine) and an input box called connectsList1.
i cannot get it to spit out into the input box without error, the error is
Uncaught TypeError: Cannot set property 'innerHTML' of null
and
connectsList1 is not defined
function getConnections(txt1) {
func_getConnections(
function (response) {
var sortorder = txt1;
var arr = response;
var i;
var Count;
var mCount;
var oCount;
var out =
"<thead>"
for (i = 0; i < arr.length; i++) {
out +=
"<tr>" +
"<tbody>" +
"<tr class=\"" + ReturnValuesAsColor(arr[i].o, arr[i].m, arr[i].server_proc) + "\">" +
"<td>" + arr[i].id + "</td>" +
//"<td>" + arr[i].user_id + "</td>" +
"<td>" + arr[i].user_name + "</td>" +
"<td>" + arr[i].workstation_name + "</td>" +
"<td>" + (!!arr[i].ip_address ? arr[i].ip_address : '') + "</td>" +
"<td>" + formatDateTime(arr[i].connect_date, 'datelongtime') + "</td>" +
"<td>" + formatDateTime(arr[i].refresh_date, 'datelongtime') + "</td>" +
"<td>" + (!!arr[i].app_ver ? arr[i].app_ver : '') + "</td>" +
"<td>" + (!!arr[i].app_date ? formatDateTime(arr[i].app_date, 'shortdate') : '') + "</td>" +
"<td>" + Messages_flag(arr[i].get_messages_flag) + "</td>" +
"<td>" + FixNumbers(arr[i].message_type_flags) + "</td>" +
//"<td>" + arr[i].o + "</td>" +
//"<td>" + arr[i].m + "</td>" +
"<td>" + arr[i].group_name + "</td>" +
//"<td>" + arr[i].server_proc + "</td>" +
"<td> <button id=\"DelImg1\" type=\"button\" name=\"btnsubmit\" class=\"ui-button ui-widget ui-state-default ui-corner-all\" onclick=\"clearText('<%= result.ClientID%>'); CopyId(" + arr[i].id + "); return Message(" + arr[i].id + ")\" >Delete</button> </td>" +
"</tr>" +
"</tbody>";
mCount = 0
if (arr[i].m != 0) {
mCount += 1;
} else if (arr[i].o != 0) {
oCount += +1;
} else if (arr[i].o == 0 & arr[i].m == 0) {
Count += 1;
}
document.getElementById("dtBody1").innerHTML = out;
document.getElementById('ConnectsList1').innerHTML = out;
ConnectsList1 = " Connection list: " & Count + oCount + mCount & " connection(s) Main Application : " & Count & " Online : " & oCount & " Mobile : " & mCount;
}})};
Any help or advice welcome, still learning ajax myself
document.getElementById("dtBody1") can not find any tag with id dtBody1. Make sure your HTML has an element with that ID.
And remember to declare the ConnectsList1 variable to avoid the second error.

How can I add javascript touch spin to html when call javascript function

I have button to add new row(s) to table.
In the table row have a column with touch spin.
I want to loop through Array(Items). to make a rows. But below code make a Error Uncaught TypeError: undefined is not a function at function tp0
function showtable() {
$('#showtable').html("");
for(var i in Items) {
var no = parseInt($('#tb tr').length) - 1;
var data = "<tr role='row' class='filter' >"
+ "<td>" + no
+ "</td>"
+ "<td>"
+ "<div class='form-group'>"
+ "<input id='touch" + i + "' type='text' value='1' name='touch" + i + "' /> "
+ "<script>"
+ "function tp" + i + " () {$(\"input[name=\'touch" + i + "\']\").TouchSpin(); alert('ttt');}"
+ "</scr" + "ipt>"
+ "</div>"
+ "</td>"
+ "</tr>";
$('#showtable').append(data);
var method_name = "tp";
window[method_name + i]();
}
}
Have any ideas thanks
Instead of adding functions like that with each row, you should just pass the row number as a variable to a predefined function:
function tp(index) {
$("input[name='touch" + index + "']").TouchSpin();
alert('ttt');
}
function showtable() {
$('#showtable').html("");
for (var i in Items) {
var no = parseInt($('#tb tr').length) - 1;
var data = "<tr role='row' class='filter' >"
+ "<td>" + no
+ "</td>"
+ "<td>"
+ "<div class='form-group'>"
+ "<input id='touch"+i+"' type='text' value='1' name='touch"+i+"' /> "
+ "</div>"
+ "</td>"
+ "</tr>";
$('#showtable').append(data);
tp(i);
}
}

How to get size of array inside an json object

this is my json object
I need to get length of itemDetails array object,
I'm using
for (var i = 0; i < data[0].itemDetails.length; i++) {
itmCode = "it001";
itmName = "soap";
Qty = "4";
//netAmt = parseFloat(data[i].Net_Amt).toFixed(2);
//paidAmt = parseFloat(data[i].Paid_Amt).toFixed(2);
//balance = (parseFloat(netAmt) - parseFloat(paidAmt)).toFixed(2); //id = "damt['+i+']"
$("#invoiceDetailTbl tbody").append("<tr id=" + i + ">" + "<td>" + itmCode + "</td>" + "<td>" + itmName + "</td>" + "<td>" + Qty + "</td>" + "</tr>");
noOfItems = parseInt(noOfItems) + parseInt(Qty);
noOfProducts = parseInt(noOfProducts) + 1;
}
but always get 0 as length

Refresh table after using jQuery .append()

The following code gets a JSON object and then spits its contents out into a <table>. The first time I do it I get my JSON content just fine. However, when I refresh, the refreshed data is stuck onto the bottom of my table. How do I refresh the data to show the new data only? I tried using .remove() but there was an obvious deleting and then a refresh of data.
$(function() {
$('#ReportedIssue').change(function() {
//$('.data').remove()
$.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
for (var i = 0; i < json.GetDocumentResults.length; i++) {
$('#DocumentInfoTable').append(
"<tr class='data'>" +
"<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
"<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
"<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
"<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
"</tr>"
);
};
});
});
});
Thank you,
Aaron
It will be more efficient to build the HTML as follows (and of course, solves the problem you're experiencing):
$(function() {
$('#ReportedIssue').change(function() {
//$('.data').remove()
$.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
var str = '';
for (var i = 0; i < json.GetDocumentResults.length; i++) {
str += "<tr class='data'>" +
"<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
"<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
"<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
"<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
"</tr>"
};
$('#DocumentInfoTable').html(str);
});
});
});

Categories

Resources