Develop Reference

Cell Popup with data from custom data source

I am trying to make tabulator to show clickPopup with data that comes with additional http-request. Here is the definition of certain column, which calls cellPopupFormatterVV function:
{title:"WSCReportVolumes", field:"WSCReportVolumes.ErrorShort",
mutator:mutatorNoData,
clickPopup:cellPopupFormatterVV
},
Here is function itself:
var cellPopupFormatterVV = function(e, cell, onRendered){
var cellContent = cell.getData();
var data = handlerCellPopup();
var container = document.createElement("div");
var contents = "<strong style='font-size:1.2em;'>Status details</strong><br/><ul style='padding:0; margin-top:10px; margin-bottom:0;'>";
contents += "<li><strong>Error:</strong> " + data.ErrorShort + "</li>";
contents += "<li><strong>Error Code:</strong> " + data.ErrorCode + "</li>";
contents += "<li><strong>Error Description:</strong> " + data.ErrorLong + "</li>";
contents += "<li><strong>Failed Check:</strong> " + data.FunctionName + "</li>";
contents += "<li><strong>Result:</strong> " + data.ShortMsg + "</li>";
contents += "</ul>";
container.innerHTML = contents;
return container;
};
I'm trying to get data through function handlerCellPopup() which is in separate file "controller_ajax.js":
<script type="text/javascript" src="controller_ajax.js"></script>
The function itself:
function handlerCellPopup() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let Response = xhttp.response;
return (Response);
};
xhttp.open("GET", "http://localhost:8003/ajax?cellPopup=rov_WSCReportVolumes_Last&computerName=ALAV706", true);
xhttp.responseType = 'json';
xhttp.send();
}
When I do request through browser, it returns exactly what I expect:
[{"ErrorLong":"Free disk space is low","ExecCode":1,"ErrorShort":"Warning","FunctionName":"Check-IsVolumeLowSpace","ErrorCode":201,"ShortMsg":"C:\\"}]
But if I try to click cell in tabulator no popup is shown. I think there is a problem with handlerCellPopup() but no idea how should I change function. Please, help.

Table data from api

I'm trying to get my data from the API into the table.
I've tried loops but it won't work
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "login", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" +myObj[x].name+ "</tr></td>";
}
txt += "</table>"
document.getElementById("myData").innerHTML = txt;
console.log(JSON.parse(this.responseText));
}
};
xmlhttp.open("GET", "https://api.github.com/users", true);
xmlhttp.setRequestHeader("Content-type", "application//x-www-form-urlencoded");
xmlhttp.send("x="+dbParam);
I would like for the table to be filled with the API data

You are closing the <tr> before the <td>:
txt += "<tr><td>" +myObj[x].name+ "</tr></td>";
fix:
txt += "<tr><td>" +myObj[x].name+ "</td></tr>";

Try this:
var obj, dbParam, xmlhttp, myObj, x = 0, objLen, txt = "";
obj = { table: "login", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
objLen = myObj.length;
txt += "<table border='1'>";
while (x < objLen) {
txt += "<tr>";
for (let [key, value] of Object.entries(myObj[x])) {
txt += "<td>" + value + "</td>";
}
txt += "</tr>";
x++;
}
txt += "</table>";
document.getElementById("myData").innerHTML = txt;
// console.log(JSON.parse(this.responseText));
}
};
xmlhttp.open("GET", "https://api.github.com/users", true);
xmlhttp.setRequestHeader("Content-type", "application//x-www-form-urlencoded");
xmlhttp.send("x="+dbParam);
<div id="myData"></div>
It shows all the fetched data in the table. One login in one column. You may change the HTML and manipulate as per your need.

Because the API is not returning any key named - name
Hit this URL on browser and see all the keys in response
https://api.github.com/users
I am changing key name to id, you may use any key which is being returned in response:
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" +myObj[x].id+ "</td></tr>";
}
txt += "</table>"

Fetching data from two API to merge them in one table

First of all,
you can see below, my working program to fetch Data from two different APIs in two different tables.
First table contains the data from an API : {Cycle, Delegated Stack, Share, expected payment}
The second one gets the data from another API to get : {the cycle, paid reward}
https://codepen.io/alexand92162579/pen/arJqmv?editors=1010
The second Code pen is the same thing but I want to merge the two tables according to the value of the cycle:
https://codepen.io/alexand92162579/pen/OGdjLJ?editors=1011
According to what I read online, I need to use Promises. I have tried this multiple times but never succeeded to make it work !
To try it, enter the Key KT19www5fiQNAiqTWrugTVLm9FB3th5DzH54 in the inputbox.
I will make a donation of 30xtz if someone helps me on this one.
// Fonction to fetch the data for every cycle on the first API
// Data Recolted (Cycle, Balance, Share, Expected Reward, Fee, Status)
// Try to merge with the second table according to the value of cycle
// // KT19www5fiQNAiqTWrugTVLm9FB3th5DzH54 */
function calculate2() {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "cycle", limit: 10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
var KT1 = $('#KT1').val();
console.log(KT1);
xmlhttp.onreadystatechange = function() {
Qfee = 0.08;
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table><tr bgcolor=#000000 color=White>"
txt += "<th>Cycle</th>"
txt += "<th>Balance</th>"
txt += "<th>Share</th>"
txt += "<th>Reward</th>"
txt += "<th>Fee</th>"
txt += "<th>Status</th>"
txt += "</tr>"
for (x in myObj) {
cycle = myObj[x].cycle;
balance = myObj[x].balance/1000000;
TotalReward = myObj[x].rewards/1000000;
status = myObj[x].status.status;
stakingBalance = myObj[x].staking_balance/1000000;
Share = balance/stakingBalance*100;
Fee = Share*TotalReward*Qfee/100;
DelegatorReward = Share*TotalReward/100 - Fee;
txt += "<tr>";
txt += "<td width=10% align=center>" + cycle + "</td>";
txt += "<td width=25% align=center>" + Math.round(balance*100)/100 + "</td>";
txt += "<td width=10% align=center>" + Math.round(Share*10)/10 + " %" + "</td>";
txt += "<td width=10% align=center>" + Math.round(DelegatorReward*100)/100 + "</td>";
txt += "<td width=10% align=center>" + Math.round(Qfee*1000)/10 + " %" + "</td>";
txt += "<td width=30% align=left>" + status + "</td>";
txt += "</tr>";
}
txt += "</table>";
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "https://api6.tzscan.io/v3/delegator_rewards_with_details/" + KT1, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
/*Fonction to fetch the data for every cycle on the second API
// Data Recolted (Cycle, Payment)
// Try to merge with the first table according to the value of cycle
// // KT19www5fiQNAiqTWrugTVLm9FB3th5DzH54*/
function calculate3() {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "cycle", limit: 10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
var KT1 = $('#KT1').val();
//console.log(KT1);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table><tr bgcolor=#000000 color=White>"
//txt += "<th>Block</th>"
txt += "<th>Cycle</th>"
txt += "<th>Paid</th>"
txt += "</tr>"
//If one transaction has been done for the cycle get from the API request 1 then I put the data on the last column of the table
for (var x = 0; x < 30; x++) {
if (KT1 == myObj[x].type.operations[0].destination.tz) {
console.log("Get one");
Block = myObj[x].type.operations[0].op_level;
console.log(Block);
PaiementCycle = Math.round(Block/4096);
PaiementCycle = PaiementCycle - 6;
console.log(PaiementCycle);
Paid = myObj[x].type.operations[0].amount/1000000;
console.log(Paid);
txt += "<tr>";
//txt += "<td width=10% align=center>" + Block + "</td>";
txt += "<td width=10% align=center>" + PaiementCycle + "</td>";
txt += "<td width=25% align=center>" + Paid + "</td>";
txt += "</tr>";
console.log(txt);
} else {
//console.log("Next");
}
}
txt += "</table>";
document.getElementById("demo2").innerHTML = txt;
return txt;
console.log("ici :" + xmlhttp);
}
};
xmlhttp.open("POST", "https://api6.tzscan.io/v3/operations/tz1XynULiFpVVguYbYeopHTkLZFzapvhZQxs?type=Transaction&number=100", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
$(function () {
/*when #tezos input loses focus, as per original question*/
$('#KT1').blur(function () {
calculate3();
calculate2();
console.log(back)
});
$('#KT1').change(function () {
calculate3();
calculate2();
});
$('#KT1').on(function () {
calculate3();
calculate2();
});
$('#KT1').keyup(function () {
calculate3();
calculate2();
});
$('#KT1').keydown(function () {
calculate3();
calculate2();
});
});
</script>

not tested - but i think it might help - i also tried to reduce function sizes for readability ;)
function getAndLogKT1(){
var KT1 = document.querySelector('#KT1')
console.log(KT1 && KT1.textContent)
return KT1 && KT1.textContent
}
function firstApiReadystatechange(){
}
function createTable(){
return document.createElement('table');
}
function addTableHeader(table, keys){
var thead = document.createElement('thead');
var tr = document.createElement('tr');
for(var i = 0; i < keys.length; i++){
var th = document.createElement('th')
var text = document.createTextNode(keys[i])
th.appendChild(text)
tr.appendChild(th)
}
thead.appendChild(tr)
table.appendChild(thead)
}
function addRowToTableBody(table, rowItems){
var body = table.querySelector('tbody')
if(!body){
body = document.createElement('tbody')
table.appendChild(body)
}
var tr = document.createElement('tr')
for(var i = 0; i < rowItems.length; i++){
var td = document.createElement('td')
var text = document.createTextNode(rowItems[i])
td.appendChild(text)
tr.appendChild(td)
}
body.appendChild(tr)
}
function getDbParam(dbParmaObj){
return JSON.stringify(dbParmaObj)
}
function sendRequestFirstApi(xmlhttp, KT1, dbParam){
xmlhttp.open("POST", "https://api6.tzscan.io/v3/delegator_rewards_with_details/" + KT1, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
function fetchDataForEveryCycleOnFirstApi(){
return new Promise((resolve, reject) => {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
var Qfee = 0.08;
if(this.readyState === 4 && this.status === 200){
try {
var responseObj = JSON.parse(this.responseText)
resolve(responseObj)
} catch {
reject({err: "json parse error"})
}
}
}
sendRequestFirstApi(xmlhttp, getAndLogKT1(), getDbParam({table: "cycle", limit: 10}))
})
}
function sendRequestSecondApi(xmlhttp, dbParam){
xmlhttp.open("POST", "https://api6.tzscan.io/v3/operations/tz1XynULiFpVVguYbYeopHTkLZFzapvhZQxs?type=Transaction&number=100", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
function fetchDataForEveryCycleOnSecondApi(){
return new Promise((resolve, reject) => {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
var Qfee = 0.08;
if(this.readyState === 4 && this.status === 200){
try {
var responseObj = JSON.parse(this.responseText)
resolve(responseObj)
} catch {
reject({err: "json parse error"})
}
}
}
sendRequestSecondApi(xmlhttp, getDbParam({table: "cycle", limit: 10}))
})
}
function parseObjectCycleHashed(respObject){
var retObj = {}
for(var x in respObject){
retObj[respObject[x]['cycle']] = respObject[x]
}
return retObj
}
function mergeCycleHashedResponseObjects(a,b){
let cyclesA = Object.keys(a)
var retObj = Object.assign({}, b)
for(var i = 0; i < cyclesA.length; i++){
Object.assign(retObj, {[cyclesA[i]]: a[cyclesA[i]] })
}
return retObj
}
function addToDOM(element, querySelector){
var el = document.querySelector(querySelector)
el && el.appendChild(element)
}
async function main(){
var responseObjApiOne = await fetchDataForEveryCycleOnFirstApi();
var responseObjApiTwo = await fetchDataForEveryCycleOnSecondApi();
var responseObjApiOneCycleBased = parseObjectCycleHashed(responseObjApiOne);
var responseObjApiTowCycleBased = parseObjectCycleHashed(responseObjApiTwo);
var mergedObject = mergeCycleHashedResponseObjects(responseObjApiOneCycleBased, responseObjApiTowCycleBased)
var table = createTable()
const headerKeys = [
"Cycle",
"Balance",
"Share",
"Reward",
"Fee",
"Status",
"Paid"
]
addTableHeader(table, headerKeys)
for(var cycle in mergedObject){
addRowToTableBody(table, headerKeys.map(columnTitle => {
return mergedObject[cycle][columnTitle]
}))
}
addToDOM(table, "dmeo2")
}

Display image from S3 by getting URL of the image from mysql database

I have a dynamic web project and in this one I try to display elements from a mysql database on an AWS Instance.
So, in my database, I have many elements (name, city, imageURL) and the imageURL is an URL from an image in an amazon S3.
In my html code, if I put the URL directly, the image is displayed but if I get back the URL from the mysql database (with a javascript function), I got the right url with console.log(imageURL) but the image is not displayed and I have this error :
GET https://s3-us-west-2.amazonaws.com/.... 403 (Forbidden)
So do you know why this doesn't work ?
EDIT : This is my javascript code :
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "rest/restaurants", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var name;
var id;
var imageURL;
var htmlText = "";
for (i = 0; i< xmlDoc.getElementsByTagName("id").length; i++){
name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
id = xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue;
imageURL = xmlDoc.getElementsByTagName("imageURL")[i].childNodes[0].nodeValue;
console.log(imageURL);
htmlText = htmlText +
"<div class=\"Popular-Restaurants-grid\">" +
"<div class=\"col-md-3 restaurent-logo\">" +
"<img src="+ imageURL + "class=\"img-responsive\"/>"+
"</div>"+
"<div class=\"col-md-2 restaurent-title\">"+
"<div class=\"logo-title\">"+
"<h4 id=\"test\">" + name + "</h4>"+
"</div>"+
"</div>"
}
document.getElementById("restaurantsContainer").innerHTML = htmlText;
}

Your current code generates a URL like:
<img src=https://s3-us-west-2.amazonaws.com/someText/text/logo1.jpgclass="img-responsive"/>
Add a space to this line:
"<img src="+ imageURL + "class=\"img-responsive\"/>"
to look like:
"<img src="+ imageURL + " class=\"img-responsive\"/>"
Notice the space before the word "class".

Cannot Display Multiple Entities of a xml File while I can display one

This is the function I use
function displayXML(string) {
var i;
var xmlDoc = $.parseXML(string);
var xml = $(xmlDoc);
var table = "<tr><th>Author</th><th>Title</th><th>Genre</th><th>Price</th><th>Publish Date</th><th>Description</th></tr>";
var x = xml.find('book').size();
for ( i = 0; i < x; i++) {
table += "<tr><td>" +
xml[i].getElementsByTagName('author')[0].childNodes[0].nodeValue +
"</td><td>" +
xml[i].getElementsByTagName('title')[0].childNodes[0].nodeValue +
"</td><td>" +
xml[i].getElementsByTagName('genre')[0].childNodes[0].nodeValue +
"</td><td>" +
xml[i].getElementsByTagName('price')[0].childNodes[0].nodeValue +
"</td><td>" +
xml[i].getElementsByTagName('publish_date')[0].childNodes[0].nodeValue +
"</td><td>" +
xml[i].getElementsByTagName('description')[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("showResults").innerHTML = table;
}
Thing is , I can successfully display this string coming from php
<?xml version="1.0" encoding="UTF-8"?><catalog> <book id="1"> <author>KAPIOS</author> <title>KATI0</title> <genre>KATI GENRE</genre> <price>50</price> <publish_date>2000-01-05</publish_date> <description>AXAM</description> </book></catalog>
but I cant do the same for lines that contain 2 or more books
<?xml version="1.0" encoding="UTF-8"?><catalog> <book id="9"> <author>Ralls, Kim</author> <title>Midnight Rain</title> <genre>Fantasy</genre> <price>5.95</price> <publish_date>2000-12-16</publish_date> <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description> </book> <book id="10"> <author>Corets, Eva</author> <title>Maeve Ascendant</title> <genre>Fantasy</genre> <price>5.95</price> <publish_date>2000-11-17</publish_date> <description>After the collapse of a nanotechnology society in England, the young survivors lay the foundation for a new society.</description> </book></catalog>
Also here is the error message
"Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefineddisplayXML"
It just seems strange to me than using getElementsByTag is possible on one case but unusable in another.
Function used to "extract" (I'm generating it via a php call) the xml,this one is working
function getBook() {
clearResults();
var request = new XMLHttpRequest();
var url = "resources/getBooksByTitle.php";
var dataToSent = "dataToSent=" + document.getElementById("booksDropDown").value;
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var return_data = request.responseText;
displayXML(return_data);
}
}
request.send(dataToSent);
document.getElementById("showResults").innerHTML = "processing...";
}
Second function which doesn't work
function searchBook() {
clearResults();
var request = new XMLHttpRequest();
var url = "resources/getBooksByKeyword.php";
var dataToSent = "dataToSent=" + document.getElementById("searchBox").value;
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var return_data = request.responseText;
displayXML(return_data);
}
}
request.send(dataToSent);
document.getElementById("showResults").innerHTML = "processing...";
}

function displayXML(string) {
var i;
var xmlDoc = $.parseXML(string);
var xml = $(xmlDoc);
var table = "<tr><th>Author</th><th>Title</th><th>Genre</th><th>Price</th><th>Publish Date</th><th>Description</th></tr>";
var x = xml.find('book').length;
for ( i = 0; i < x; i++) {
table += "<tr><td>" +
xml.find('book')[i].getElementsByTagName('author')[0].childNodes[0].nodeValue +
"</td><td>" +
xml.find('book')[i].getElementsByTagName('title')[0].childNodes[0].nodeValue +
"</td><td>" +
xml.find('book')[i].getElementsByTagName('genre')[0].childNodes[0].nodeValue +
"</td><td>" +
xml.find('book')[i].getElementsByTagName('price')[0].childNodes[0].nodeValue +
"</td><td>" +
xml.find('book')[i].getElementsByTagName('publish_date')[0].childNodes[0].nodeValue +
"</td><td>" +
xml.find('book')[i].getElementsByTagName('description')[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("showResults").innerHTML = table;
}
The xml object itself is not an array, so you extract data from 1 book only(size of a non-array is always 1). Use this one instead.