Error while looping in ajax call - javascript

I am trying to print the results of an specific json object. I am receiving
Uncaught TypeError: undefined is not a function
while trying to execute the following code:
$.getJSON("http://test.test.com/api/service/Something()?username=" + username + "&password=" + password + "&$format=json", function( d ){
var tr;
results = d.d.results;
for (var i=0; i<results.length; i++){
tr = ("</tr>");
tr.append("<td>" + results[i].something + "</td>");
tr.append("<td>" + results[i].something_2 + "</td>");
tr.append("<td>" + results[i].something_3 + "</td>");
$('table').append(tr);
}
I pretty much copied the code above from another question, obviously I am doing something wrong.
The error comes here > tr.append("" + results[i].something + "")

tr = $("<tr/>");
You were missing the $, and had the / in the wrong place.
Also:
tr.append("<td>" + results[i].something + "</td>");
^^^^^ missing

tr doesn't have a function called append, because you never defined one. Here's how you're creating tr:
var tr;
tr = ("</tr>");
So tr is likely just a string at this point. You never define any functions on it, so this won't work:
tr.append(...);
Perhaps you meant to create a jQuery object?:
tr = $("</tr>");
Though in that case you're likely also looking to create the element, not close it:
tr = $("<tr/>");
(Note also that your first append() is missing the opening td element.)

Change
tr = ("</tr>");
tr.append("" + results[i].something + "</td>");
TO
tr = $("<tr/>");
tr.append("<td>" + results[i].something + "</td>");

Related

Delete Firebase Node with OnClick Function JavaScript

I have two JavaScript functions, one to generate a table and the other to delete a row by removing the node from the Firebase database. I keep getting an error that says deleteRecord() function is undefined. Please assist...
function generate_table(){
$('#emp_body').html('');
console.log(dArr);
for (var i = 0; i < dArr.length; i++) {
var tr;
tr = $('<tr/>');
var strSleeve = "View Sleeve";
var sleeveLink = strSleeve.link(dArr[i][1].downloadURLSleeve);
var strAud = "View Audio";
var audioLink = strAud.link(dArr[i][1].downloadURLFile);
tr.append("<td>" + (i+1) + "</td>");
tr.append("<td>" + childKeys[i] + "</td>");
tr.append("<td>" + dArr[i][1].stageName + "</td>");
tr.append("<td>" + dArr[i][1].fullName + "</td>");
tr.append("<td>" + dArr[i][1].email + "</td>");
tr.append("<td>" + dArr[i][1].city + "</td>");
tr.append("<td>" + dArr[i][1].cell + "</td>");
tr.append("<td>" + sleeveLink + "</td>");
tr.append("<td>" + audioLink + "</td>");
tr.append('<td>' + '<button id="deleteBtn" onclick="deleteRecord(\''+childKeys[i]+'\');" class="btn btn-danger">Delete Record</button>' + '</td>');
$('#emp_body').append(tr);
}
}
// DELETE FUNCTION
function deleteRecord(key){
var refDB = firebase.database().ref().child('submissions/'+key);
refDB.once("value")
.then(function(snapshot) {
snapshot.ref.remove();
alert("Record deleted..!");
}).catch(function(error) {alert("Data could not be deleted." + error);});
}
You should do as follows:
function deleteRecord(key){
var refDB = firebase.database().ref('submissions/' + key);
refDB.remove()
.then(function() {
console.log("Remove succeeded.")
})
.catch(function(error) {
console.log("Remove failed: " + error.message)
});
}
See the corresponding doc here: https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove
You should not use the once() method which is used to read data, as explained here: https://firebase.google.com/docs/reference/js/firebase.database.Reference#once
I figured out a workaround. I think things will get easier from here. For now I am going to use the url to the specific node and delete the item from firebase while I try to figure out a better approach.
function generate_table(){
$('#emp_body').html('');
console.log(dArr);
for (var i = 0; i < dArr.length; i++) {
var tr;
tr = $('<tr/>');
var strSleeve = "View Sleeve";
var sleeveLink = strSleeve.link(dArr[i][1].downloadURLSleeve);
var strAud = "View Audio";
var audioLink = strAud.link(dArr[i][1].downloadURLFile);
tr.append("<td>" + (i+1) + "</td>");
tr.append("<td>" + childKeys[i] + "</td>");
tr.append("<td>" + dArr[i][1].stageName + "</td>");
tr.append("<td>" + dArr[i][1].fullName + "</td>");
tr.append("<td>" + dArr[i][1].email + "</td>");
tr.append("<td>" + dArr[i][1].city + "</td>");
tr.append("<td>" + dArr[i][1].cell + "</td>");
tr.append("<td>" + sleeveLink + "</td>");
tr.append("<td>" + audioLink + "</td>");
var deleteLink = 'https://myFirebaseAuthDomain.firebaseio.com/submissions'+'/'+ childKeys[i];
tr.append('<td>' + '<button id="deleteBtn" class="btn btn-danger">Delete Record</button>' + '</td>');
$('#emp_body').append(tr);
document.getElementById("deleteBtn").onclick = function()
{
console.log("AHOY!" + deleteLink);
var win = window.open(deleteLink, '_blank');
win.focus();
};
}
}
Typically, you fetch the data for the table and at that point Firebase is out of the picture. You take the response data and use JavaScript or whateverScript to build out your UI as you like, in your case you want a table.
I recommend that you add a dataset property to each table row which hold the value of whatever node that row represents, e.g. dataset.myid = a8hKE21Nswtevr applied to each <tr>.
You then appy a click listener to the entire table, or to the rows (by class), and all you have to do is evt.target.parentElement.dataset.myid to get the specific thing the end user clicked.
You then take that uid and talk to firebase as needed.

How to parse string correctly into onclick method

I have a dynamic table which is being created with jquery. The problem I face is, jquery interferes my string so it's not being parsed correctly to onclick method.
for (var i = 0; i < data.result.list.length; i++)
{
var tr = $("<tr></tr>");
tr.append("<td>" + "<a onclick='" + data.result.list[i].cfunction + "'>" + data.result.list[i].cvalue + "</a>" + "</td>");
tr.append("<td>" + + "</td>");
table.append(tr);
}
data.result.list[i].cfunction has a string value like "getMyMethod('My parameter')" which is basically calling a method with parameter in quotes.
But after jQuery parses this to onclick function it's value changes as onclick="getMyMethod(" my="" parameter')'=""
here is the generated html:
<a onclick="getMyMethod(" my="" parameter')'="" >My Value</a>
Can anyone put me in the right direction?
Change this line
"<a onclick='" + data.result.list[i].cfunction + "'>"
to this
'<a onclick="' + data.result.list[i].cfunction + '">'
You internal double quotes " needs to be escaped
var func = data.result.list[i].cfunction.replace( /"/g, "\\\"" );
tr.append("<td>" + "<a onclick='" + func + "'>" + data.result.list[i].cvalue + "</a>" + "</td>");
you should modify code with:
tr.append(
$("<td></<td>").append(
$("<a></a>")
.attr({
"href" : "#"
})
.text(data.result.list[i].cvalue)
.attr({
"onclick" : data.result.list[i].cfunction
})
)
);
You can modify your cfunction items in the data like this (encode):
cfunction: "getMyMethod(\"My parameter\")",
This worked in the console (make sure the table ID exists):
var data = {
result: {
list: [
{
cfunction: "getMyMethod(\"My parameter 1\")",
cvalue: "1"
},
{
cfunction: "getMyMethod(\"My parameter 2\")",
cvalue: "2"
}
]
}
}
var table = $("#testTable");
for (var i = 0; i < data.result.list.length; i++) {
var tr = $("<tr></tr>");
tr.append("<td>" + "<a onclick='" + data.result.list[i].cfunction + "'>" + data.result.list[i].cvalue + "</a>" + "</td>");
tr.append("<td>" + + "</td>");
table.append(tr);
}
var getMyMethod = function (funcParam) {
console.log(funcParam);
};
Can you try this. And be sure your data.result.list[i].cfunction value is
"getMyMethod('My parameter')"
for (var i = 0; i < data.result.list.length; i++)
{
var tr = $("<tr></tr>");
tr.append("<td>" + "<a onclick=\" " + data.result.list[i].cfunction +
"\" >" + data.result.list[i].cvalue + "</a>" + "</td>");
tr.append("<td>" + + "</td>");
table.append(tr);
}

How to merge cells with equal values

I have this Table where I need to merge cells with same value for a column Week.
Below is the Table I am getting as an output right now:
Week Project OS TotalTests #cycle of run
1 P1 ABC 0 0
1 P2 XYZ 4799 1
I want the output to be like ( 1 should be placed at the center of a cell) :
Week Project OS TotalTests #cycle of run
1 P1 ABC 0 0
P2 XYZ 4799 1
Here is the code:
function BindTable(startWW, endWW, selPhaseNumber, selctedYear) {
var url = webApiUrl + .....
$('#GraphTable > tbody > tr ').remove();
$.ajax({
url:url,
type: "Get",
dataType: "json",
data: { .... },
crossDomain: true,
success: function (data) {
if (data.length > 0) {
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].WW + "</td>");
tr.append("<td>" + data[i].Project + "</td>");
tr.append("<td>" + data[i].OS + "</td>");
tr.append("<td>" + data[i].TotalTests + "</td>");
tr.append("<td>" + data[i].CycleRun + "</td>");
$('#GraphTable').append(tr);
}
}
else {
tr = $('<tr/>');
tr.append("<th colspan='10' style='text-align:center'>No Data to display</th>");
$('#GraphTable').append(tr);
}
}
});
}
Any help ?
You can combine cells with the rowspan attribute. The Problem: If you loop through the data from the beginning, you don't know the right value for the rowspan-attribute, because ithas to be placed in the first td-element!
Solution: Loop through it from the end to the beginning:
function success(data) {
if (data.length > 0) {
var oldValue = data[data.length-1].WW,
c=1;
for (var i = data.length-1; i >= 0; i--) {
let $tr = $('<tr/>');
if(i==0 || oldValue != data[i-1].WW) {
$tr.append("<td rowspan=\""+c+"\">" + data[i].WW + "</td>");
c = 1;
if(i>0) oldValue = data[i-1].WW;
} else {
c++;
}
$tr.append("<td>" + data[i].Project + "</td>");
$tr.append("<td>" + data[i].OS + "</td>");
$tr.append("<td>" + data[i].TotalTests + "</td>");
$tr.append("<td>" + data[i].CycleRun + "</td>");
$('#GraphTable').prepend($tr);
}
} else {
let $tr = $('<tr/>');
$tr.append("<th colspan='5' style='text-align:center'>No Data to display</th>");
$('#GraphTable').append($tr);
}
}
working fiddle
EDIT: working fiddle with head-line
changed the loop order and naming convention.
If you track the last DataWW you could print it or not. You only need to print when last DataWW is different from current DataWW. You can adjust your for loop like this:
var tr;
var lastDataWW = null
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
if (lastDataWW != data[i].WW) {
tr.append("<td>" + data[i].WW + "</td>");
else {
tr.append("<td> </td>");
}
tr.append("<td>" + data[i].Project + "</td>");
tr.append("<td>" + data[i].OS + "</td>");
tr.append("<td>" + data[i].TotalTests + "</td>");
tr.append("<td>" + data[i].CycleRun + "</td>");
$('#GraphTable').append(tr);
lastDataWW = data[i].WW
}
And as Santi said below the comments, you could center the first column if you add this css in your style sheet.
/* CSS */
#GraphTable tr td:first-child {
text-align: center;
}

Get report data to display as data table in HTML through REST API

I have very little knowledge of REST API and Javascript. However, I now need to work on a REST API of a third party company which is sending emails for my company and to get the report data through the REST API.
The data can get through a GET method with an URL with TOKEN: https://www.probancemail.com/rest/stats/?&token={platformtoken}
Sample of JSON array as below:
{
"bounce":2,
"campaign_external_id":"RT1-",
"campaign_name":"RT1-Welcome1",
"click":19,
"delivered":333,
"open":69,
"sending_external_id":"RT-PWDE1-20170617",
"sendingtime_ts":1497650423000,
"sent":335,
"spam":0,
"template_external_id":"0193",
"unsub":6
}
What I need as a first step is to retrieve the JSON data from the third-party based on the URL with token, and parse the JSON data through Jquery and display it on the webpage as table(HTML).
To achieve that, I have found the Jquery codes below:
<!DOCTYPE html>
<html>
<head>
<script>
var url = 'https://www.probancemail.com/rest/stats/?&token={platformtoken}'
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr=[];
for (var i = 0; i < json.length; i++) {
tr.push('<tr>');
tr.push("<td>" + json[i].campaign_name + "</td>");
tr.push("<td>" + json[i].campaign_external_id + "</td>");
tr.push("<td>" + json[i].sending_external_id + "</td>");
tr.push("<td>" + json[i].sent + "</td>");
tr.push("<td>" + json[i].delivered + "</td>");
tr.push("<td>" + json[i].open + "</td>");
tr.push("<td>" + json[i].click + "</td>");
tr.push("<td>" + json[i].spam + "</td>");
tr.push("<td>" + json[i].unsub + "</td>");
tr.push('</tr>');
}
$('table').append($(tr.join('')));
});
</script>
</head>
<body>
<table></table>
</body>
</html>
However, this code doesn't work, I think it is because of the token, the GetJSON function doesn't get the JSON. However, I'm very new to this, so I don't have any insights.
Will you please take a look and help me figure out the problem?
Any advice is welcomed! >> Maybe I shouldn't use Jquery even?
Thanks in advance!
I was not able to access the url, I got access denied, so i tried with different url, it works like this..
You can check your webservice whether it's returning anything, or if there's any CORS issue which is likely to happen
$(document).ready(function () {
var url = "https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true"
$.getJSON(url,
function (json) {
var tr = $("<tr></tr>")
for (var i = 0; i < json.results.length; i++) {
var td = "<td>" + json.results[i].address_components[0].long_name+"</td>"
$(tr).append(td);
}
$('table').append($(tr));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<table></table>
you can test code like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var data=[{
"bounce":2,
"campaign_external_id":"RT1-",
"campaign_name":"RT1-Welcome1",
"click":19,
"delivered":333,
"open":69,
"sending_external_id":"RT-PWDE1-20170617",
"sendingtime_ts":1497650423000,
"sent":335,
"spam":0,
"template_external_id":"0193",
"unsub":6
},{
"bounce":2,
"campaign_external_id":"RT1-",
"campaign_name":"RT1-Welcome1",
"click":19,
"delivered":333,
"open":69,
"sending_external_id":"RT-PWDE1-20170617",
"sendingtime_ts":1497650423000,
"sent":335,
"spam":0,
"template_external_id":"0193",
"unsub":6
}];
var tr=[];
for (var i = 0; i < data.length; i++) {
tr.push('<tr>');
tr.push("<td>" + data[i].campaign_name + "</td>");
tr.push("<td>" + data[i].campaign_external_id + "</td>");
tr.push("<td>" + data[i].sending_external_id + "</td>");
tr.push("<td>" + data[i].sent + "</td>");
tr.push("<td>" + data[i].delivered + "</td>");
tr.push("<td>" + data[i].open + "</td>");
tr.push("<td>" + data[i].click + "</td>");
tr.push("<td>" + data[i].spam + "</td>");
tr.push("<td>" + data[i].unsub + "</td>");
tr.push('</tr>');
}
$('table').append($(tr.join('')));
})
</script>
</head>
<body>
<table></table>
</body>
</html>
or you can test your code by api write by yourself,this what you can do now.
Follow this for the "No 'Access-Control-Allow-Origin' error
"No 'Access-Control-Allow-Origin' header is present on the requested resource"

ajax data show in table with 10 row

I have an ajax function which select data from database base on entered information i want this information in a table having a format like this
System Id | Last Name | First Name | Middle Name | Address
Here is my ajax
$.ajax({
type: 'POST',
url: '../include/OwnerInformation.php',
dataType: "json",
data: {
lastname: last_name,
firstname: first_name,
sysid: sys_id,
address: address
},
success: function(data) {
console.log(data);
var tr = ("#searchresults");
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + "<a id=" + data[i].sys_id + " href='#' value='" + data[i].sys_id + "'>" + data[i].sys_id + "</a>" + "</td>");
tr.append("<td>" + data[i].firstname + "</td>");
tr.append("<td>" + data[i].middlename + "</td>");
tr.append("<td>" + data[i].lastname + "</td>");
tr.append("<td>" + data[i].address + "," + "</td>");
$('table').append(tr);
}
}
});
I got the tutorial for adding row here but it is not behaving like i want it to.What i want is
Result will show in a specific table (search result table) - ok
The table will have a fix number of row (10 rows)
If the result is below 10 the row will still be 10 if row is more
than 10 it will show the next 10 with next and previous button
For your number 2:
Just use
for (var i = 0; i < 10; i++)
Then if data[i] is null, you could instantiate empty values for data[i]
For your number 3:
You should edit your php so it accept something like table.php?limit=10&startRow=10 (this should fetch the second page)
first of all: The first ("#searchresults") line you forgot to add the dollar sign $. So $("#searchresults").
Secondly: You shouldn't reassign the variable for this kind of task
Finally. My solution:
var table = $("#searchresults");
for (var i = 0; i < 10; i++) {
if(data[i]==null)
data[i] = {};
var tr = $('<tr/>');
tr.append("<td>" + "<a id=" + data[i].sys_id + " href='#' value='" + data[i].sys_id + "'>" + data[i].sys_id + "</a>" + "</td>");
tr.append("<td>" + data[i].firstname + "</td>");
tr.append("<td>" + data[i].middlename + "</td>");
tr.append("<td>" + data[i].lastname + "</td>");
tr.append("<td>" + data[i].address + "," + "</td>");
table.append(tr);
}
i know it's not pretty and maybe cause some problems down the road. But hey!
var data = [
{
firstname:"Heinrich",
middlename:"Lelouch",
lastname:"Breinholdt",
address:"German smurtz"
},
{
firstname:"Cate",
middlename:"Brom",
lastname:"Lriah",
address:"Somewhere"
},
{
firstname:"Funky",
middlename:"Daddy",
lastname:"Man",
address:"Funky land"
}
];
///// You don't even need to touch this code!!!
var table = $("#searchresults");
(function(){// generate header row
var tr = $('<tr>');
if(data && data.length)
for(var key in data[0])
tr.append("<td class='table-header'>"+key+"</td>");
table.append(tr);
})();
// generate content rows
for (var i = 0; i < 10; i++) {
var tr = $('<tr>');
if(data[i])
for(var key in data[i])
tr.append("<td>" + data[i][key] + "</td>");
else
for(var key in data[0])
tr.append("<td> </td>");
table.append(tr);
}
#searchresults{
border-collapse: collapse;
}
#searchresults td{
border: 1px solid grey;
}
#searchresults .table-header{
border-bottom: 2px solid black;
padding: 3px 5px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="searchresults"></table>

Categories

Resources