i'm trying to pull data from a response i'm getting on a Google Workspace API request to a HTML table, the response i'm getting is an array that is being store at an HTML element every time I made the request. Here's my code for it:
function execute() {
return gapi.client.directory.users.list({"domain": "mydomain", "maxResults": 450})
.then(function(response) {
let t = document.querySelector("#tabela")
let data = []
console.log(response)
response.result.users.forEach((user)=> {
data.push(user)
// console.log("Email"+ user.primaryEmail)
// console.log("Email"+ user.lastLoginTime)
SheetDB.write('https://sheetdb.io/api/v1/81m3qdtu47hra', { sheet: 'Sheet1', data: {email: '${user.primaryEmail}' , login: '${user.lastLoginTime}'}}).then(function(result){
console.log(result);
}, function(error){
console.log(error);
});
})
console.log(data)
let td = data.reduce((acc, user)=>{
acc += `<tr>${user.lastLoginTime}</tr>`
return acc
},"")
t.innerHTML = td
console.log("O result é:", td)
},
function(err) { console.error("Execute error", err); });`
and then, my code which is not working to populate my html table with it:
<table class="table table-striped">
<tr class="bg-info">
<th>E-mail</th>
<th>Last Login Time</th>
<th>Status</th>
<th>Permissions</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = document.querySelector("#tabela")
buildTable(myArray)
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${user.primaryEmail}</td>
</tr>`
table.innerHTML += row
}
}
what am I doing wrong?
The buildTable function requires an array as the argument to the function whereas you are passing the entire myTable element as the argument on the second line in your script tag. That is why the for loop never gets executed since data.length would be undefined. Pass the array of data from the API to the function and you should be good to go.
Related
I am designing a web page that will obtain data from my firestore collection and display each document with its corresponding fields Here is the code:
<table class="table is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>AR Level</th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
</table>
here is the JS:
db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
.get()
.then(
function(querySnapshot){
querySnapshot.forEach(function(doc){
dataObj = doc.data()
console.log(dataObj)
buildTable(dataObj)
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].Title}</td>
<td>${data[i].Author}</td>
<td>${data[i].Points}</td>
</tr>`
table.innerHTML += row
}
}
})
}
)
I don't see why you're using a for loop in your function. Unless one "Book" document is an Array of items each having the Title/Author/Points fields.
You're basically looping through the data object as if it's an array. Chances are, it's not.
If I'm right, and one "Book" document is object/map containing those three fields, then your code should be like this:
db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
.get()
.then(querySnapshot=>{
querySnapshot.forEach(doc=>{
let data = doc.data();
let row = `<tr>
<td>${data.Title}</td>
<td>${data.Author}</td>
<td>${data.Points}</td>
</tr>`;
let table = document.getElementById('myTable')
table.innerHTML += row
})
})
.catch(err=>{
console.log(`Error: ${err}`)
});
I am designing a web page that will obtain data from my firestore collection and display each document with its corresponding fields Here is the code:
<table class="table is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>AR Level</th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
</table>
here is the JS:
db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
.get()
.then(
function(querySnapshot){
querySnapshot.forEach(function(doc){
dataObj = doc.data()
console.log(dataObj)
buildTable(dataObj)
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].Title}</td>
<td>${data[i].Author}</td>
<td>${data[i].Points}</td>
</tr>`
table.innerHTML += row
}
}
})
}
)
I don't see why you're using a for loop in your function. Unless one "Book" document is an Array of items each having the Title/Author/Points fields.
You're basically looping through the data object as if it's an array. Chances are, it's not.
If I'm right, and one "Book" document is object/map containing those three fields, then your code should be like this:
db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
.get()
.then(querySnapshot=>{
querySnapshot.forEach(doc=>{
let data = doc.data();
let row = `<tr>
<td>${data.Title}</td>
<td>${data.Author}</td>
<td>${data.Points}</td>
</tr>`;
let table = document.getElementById('myTable')
table.innerHTML += row
})
})
.catch(err=>{
console.log(`Error: ${err}`)
});
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>
I am using Phonegap and jquery-Mobile-1.4.5 to create a cross platform App. Since I am a Java developer , Java script is a very new concept for mine.
I am creating a simple app where I have one html table where I want to show a select query from a database table . From here I found how to send a callback to functions.
But my problem is ,
onload is not calling my showContact(resultSet) function
How can I print the resultSet in the <tbody> tag, I do not want to use javascript concatenation inside the showContact(resultSet) function.
Part of my index.html file
<table data-role="table" id="table-custom-2" onload="showContact(resultSet)" >
<thead>
<tr class="ui-bar-d">
<th>Id</th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<!--Print the resultSet data with a for loop here-->
</tbody>
</table>
My javascript code
function showContact(resultSet){
var db= window.openDatabase("appDb","1.0","appDb",200000);
selectRow("SELECT * FROM contact;", function(resultSet) {
console.log(resultSet);
//Don't want to access the <table> from here
});
}
/** Select Row from Table **/
function selectRow(query, callBack){
var result = [];
db.transaction(function (tx) {
tx.executeSql(query, [], function(tx, rs){
for(var i=0; i<rs.rows.length; i++) {
var row = rs.rows.item(i)
result[i] = { id: row['id'],
name: row['name'],
number: row['number']
}
}
callBack(result);
}, errorHandler);
});
}
You can frame the data you get from DB in a table row and assign it to the table body. See following code,
You can call the function selectrow() when the page loads
<table data-role="table" id="table-custom-2">
<thead>
<tr class="ui-bar-d">
<th>Id</th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody id="contactlist">
<!--Print the resultSet data with a for loop here-->
</tbody>
</table>
<script>
$(document).ready(function($) {
var db= window.openDatabase("appDb","1.0","appDb",200000);
selectrow();
});
function selectrow(){
db.transaction(function (tx) {
tx.executeSql("SELECT * FROM contact", [], function(tx, rs){
var output = '';
for(var i=0; i<rs.rows.length; i++) {
var row = rs.rows.item(i)
output += '<tr><td>' + row['id'] + '</td><td>' + row['name'] + '</td><td>' + row['number'] + '</td></tr>';
}
$('#contactlist').html(output);
}, errorHandler);
});
}
</script>
My function is pulling information from an api and then putting it into the table. For some reason this function is not working.
this is my function:
function getPayInfo(socCode) {
var apiurl = "http://api.lmiforall.org.uk/api/v1/ashe/estimatePay?soc=";
var apicall = apiurl + socCode;
$.get(apicall, function(data) {
$("#Pay tbody").html("");
$.each(data.years, function(i, e) {
var tablerow = $("<tr></tr>");
tablerow.append("<td>" + e.year + "</td>");
tablerow.append("<td>" + e.estpay + "</td>");
$("#Pay tbody").append(tablerow);
});
});
}
and this is the table I am putting it into:
<div class="well table table-stripped">
<h4>Pay Information</h4>
<h5>Pounds per Week</h5>
<table id="Pay">
<thead>
<tr>
<th>Year</th>
<th>Estimate Pay</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I expected it to return a year and data value into the table. if you take the url in the function and add a certain 4 figure value (the socCode) (e.g. 5113) to the end it will give the data online this should then be returned to the table body.
Have you debugged/examined the data structure inside your $.get callback? It looks to me that your access method is incorrect. When I access your example url, I get the following data back:
{
"soc":5113,
"series":[
{
"year":2012,
"estpay":340
}
]
}
I think you want your iterator to be this instead:
// there is no data.years
$.each(data.series, function(i, e) {
...
This should make your e param be of the form {year: 2012, estpay: 340}, which appears to be what you want to interpret it as.