I'm trying to take data from a JSON file and create a html table, I am able to create the first row of the table using the below code:
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<table id='overview-table'>
<tr>
<th>owner Name</th>
<th>date</th>
<th>shares Held</th>
<th>shares Change</th>
<th>shares ChangePCT</th>
<th>market Value</th>
</tr>
<tr>
<td id='ownerName'></td>
<td id='date'></td>
<td id='sharesHeld'></td>
<td id='sharesChange'></td>
<td id='sharesChangePCT'></td>
<td id='marketValue'></td>
</tr>
</table>
<script type="text/javascript">
const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
const requestJSON = async url => {
const response = await (await fetch(url)).json();
ownerName.innerHTML = response.ownerName[0];
date.innerHTML = response.date[0];
sharesHeld.innerHTML = response.sharesHeld[0];
sharesChange.innerHTML = response.sharesChange[0];
sharesChangePCT.innerHTML = response.sharesChangePCT[0];
marketValue.innerHTML = response.marketValue[0];
}
requestJSON(requestUrl);
</script>
</body>
</html>
The first row is created successfully, however if I want to include more rows then I would have to repeat the same bunch of code over again. Is there not a more efficient way of doing this?
Here is my JSON data:
{
"ownerName":{
"0":"VANGUARD GROUP INC",
"1":"BLACKROCK INC.",
"2":"BERKSHIRE HATHAWAY INC",
"3":"STATE STREET CORP",
"4":"FMR LLC",
"5":"GEODE CAPITAL MANAGEMENT, LLC",
"6":"PRICE T ROWE ASSOCIATES INC \/MD\/",
"7":"MORGAN STANLEY",
"8":"NORTHERN TRUST CORP",
"9":"BANK OF AMERICA CORP \/DE\/"
},
"date":{
"0":"09\/30\/2022",
"1":"09\/30\/2022",
"2":"09\/30\/2022",
"3":"09\/30\/2022",
"4":"09\/30\/2022",
"5":"09\/30\/2022",
"6":"09\/30\/2022",
"7":"09\/30\/2022",
"8":"09\/30\/2022",
"9":"09\/30\/2022"
},
"sharesHeld":{
"0":"1,272,378,901",
"1":"1,020,245,185",
"2":"894,802,319",
"3":"591,543,874",
"4":"350,900,116",
"5":"279,758,518",
"6":"224,863,541",
"7":"182,728,771",
"8":"176,084,862",
"9":"142,260,591"
},
"sharesChange":{
"0":"-4,940,153",
"1":"-8,443,132",
"2":"0",
"3":"-6,634,650",
"4":"6,582,142",
"5":"1,502,326",
"6":"-13,047,242",
"7":"278,206",
"8":"-3,744,060",
"9":"-6,873,324"
},
"sharesChangePCT":{
"0":"-0.387%",
"1":"-0.821%",
"2":"0%",
"3":"-1.109%",
"4":"1.912%",
"5":"0.54%",
"6":"-5.484%",
"7":"0.152%",
"8":"-2.082%",
"9":"-4.609%"
},
"marketValue":{
"0":"$192,498,204",
"1":"$154,352,894",
"2":"$135,374,643",
"3":"$89,494,673",
"4":"$53,087,679",
"5":"$42,324,666",
"6":"$34,019,605",
"7":"$27,645,036",
"8":"$26,639,879",
"9":"$21,522,605"
},
You can use a loop and duplicate a row template each time. Rather than using IDs for your table cells, you'll want to use classes as they'll be repeated throughout the document.
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<table id='overview-table'>
<tr>
<th>owner Name</th>
<th>date</th>
<th>shares Held</th>
<th>shares Change</th>
<th>shares ChangePCT</th>
<th>market Value</th>
</tr>
<tr id='rowTemplate'>
<td class='ownerName'></td>
<td class='date'></td>
<td class='sharesHeld'></td>
<td class='sharesChange'></td>
<td class='sharesChangePCT'></td>
<td class='marketValue'></td>
</tr>
</table>
<script type="text/javascript">
const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
const requestJSON = async url => {
const response = await (await fetch(url)).json();
const limit = Math.max(...Object.keys(response.ownerName)) + 1;
for(let index = 0; index < limit; index++)
{
let newRow = rowTemplate.cloneNode(true);
newRow.id = '';
newRow.querySelector('.ownerName').innerHTML = response.ownerName[index];
newRow.querySelector('.date').innerHTML = response.date[index];
newRow.querySelector('.sharesHeld').innerHTML = response.sharesHeld[index];
newRow.querySelector('.sharesChange').innerHTML = response.sharesChange[index];
newRow.querySelector('.sharesChangePCT').innerHTML = response.sharesChangePCT[index];
newRow.querySelector('.marketValue').innerHTML = response.marketValue[index];
rowTemplate.parentNode.appendChild(newRow);
}
rowTemplate.parentNode.removeChild(rowTemplate); // Tidy up and remove the template
}
requestJSON(requestUrl);
</script>
</body>
</html>
I created a table with HTML, Js and express. This table for now get some data from a server request. I need to checkboxes and a SelectALL button/function for each row in this table. I'm not using Jquery or similar and in practice I use classList, querySelector and map to populate the table.
I would need this button to select aLL the rows (checkboxes) and then do something else with the data of the rows.
Anyone who knows how to help with that?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="./src/app.css" rel="stylesheet" >
<title>Data Table w/ Refresh</title>
</head>
<body>
<div class="table-refresh" data-url="/data">
<!--
<table class="table-refresh__table">
<thead>
<tr>
<th>Tipo Doc</th>
<th>Data Doc</th>
<th>Importo</th>
<th>Prestatore</th>
<th>Committente</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="table-refresh__options">
<span class="table-refresh__label">Last Update:never</span>
<button type="button" class="table-refresh__button">
<i class="material-icons">refresh></i>
</button>
-->
</div>
<script src='./src/app.js'></script>
</body>
</html>
{
/**
* Populates a data table with some data.
*
* #param {HTMLDivElement} root
*/
async function updateTable(root){
root.querySelector(".table-refresh__button").classList.add("table-refresh__button--refreshing");
const table = root.querySelector(".table-refresh__table");
const response=await fetch(root.dataset.url)
const data = await response.json()
//clear table
table.querySelector("thead tr").innerHTML="";
table.querySelector("tbody").innerHTML="";
//populate headers
for (const header of data.headers) {
table.querySelector("thead tr").insertAdjacentHTML("beforeend", `<th>${ header }</th>`);
}
// Populate rows
for (const row of data.rows) {
table.querySelector("tbody").insertAdjacentHTML("beforeend", `
<tr>
${ row.map (col => `<td>${ col }</td>`).join("") }
</tr>
`);
}
//Update "last updated" text
root.querySelector(".table-refresh__label").textContent = `Last Update: ${ new Date(data.lastUpdated).toLocaleString()}`;
//Stop rotating
root.querySelector(".table-refresh__button").classList.remove("table-refresh__button--refreshing");
}
for (const root of document.querySelectorAll(".table-refresh[data-url]")) {
const table = document.createElement("table");
const options = document.createElement("div");
table.classList.add("table-refresh__table");
options.classList.add("table-refresh__options");
table.innerHTML = `
<thead>
<tr></tr>
</thead>
<tbody>
<tr>
<td>Loading</td>
</tr>
</tbody>
`;
options.innerHTML = `
<span class = "table-refresh__label">Last Update: never</span>
<button type="button" class="table-refresh__button">
<i class="material-icons">refresh</i>
</button>
`;
root.append(table, options);
options.querySelector(".table-refresh__button").addEventListener("click", () => {
updateTable(root);
});
updateTable(root);
}
}
I am using Google Apps Script and Javascript to build a WebApp. Using a forEach loop to pull data from the GoogleSheet to build the HTML table I have a date time field as the 6th column in my table. When the table goes to populate there is an error -
Uncaught TypeError: Cannot read property 'forEach' of null -
If i drop the column from the function getTableData the html table will populate without the date time stamp. How do I get the date/time stamp to come through in the forEach loop?
document.addEventListener("DOMContentLoaded", function() {
//The google script ill call get table data passing data. on success it will call the generateTable passing the data from data array.
google.script.run.withSuccessHandler(generateTable).getTableData();
//note the above function getTableData is a function in the code.gs file see bottom of page for the contents of file
});
function generateTable(dataArray) {
var tbody = document.getElementById("table-body");
dataArray.forEach(function(r) {
var row = document.createElement("tr");
var col1= document.createElement("td");
col1.textContent = r[0];
var col2= document.createElement("td");
col2.textContent = r[1];
var col3= document.createElement("td");
col3.textContent = r[2];
var col4= document.createElement("td");
col4.textContent = r[3];
var col5= document.createElement("td");
col5.textContent = r[4];
var col6= document.createElement("td");
col6.textContent = r[5];
tbody.appendChild(col1);
tbody.appendChild(col2);
tbody.appendChild(col3);
tbody.appendChild(col4);
tbody.appendChild(col5);
tbody.appendChild(col6);
tbody.appendChild(row);
});
}
//code.gs function getTableData
function getTableData() {
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
// the 6 in the below variable is the 6th column in my googlesheet and is a data/time stamp. this is where I am throwing the error. if i change it to 5 it works, but does not get the date/time stamp on the html table
var data = ws.getRange(2,1, ws.getLastRow() -1, 6).getValues();
Logger.log("data : " + data);
return data;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap link -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
<!--materialize link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?!= include("pageCSS"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<h1>Guest List Data Table</h1>
<table id="tableId1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Cred Type</th>
<th>Zip Code</th>
<th>Estimate</th>
<th>Time</th> <!-- this is the column where D/T stamp should show -->
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
</div>
<!-- CLOSE ROW -->
<div class="row">
<div class="col s12">
<table id="tableId" border=1>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Cred Type</th>
<th>Zip Code</th>
<th>Estimate</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>DANIELLE</td>
<td></td>
</tr>
<tr>
<td>Item </td>
<td>two</td>
</tr>
<tr><td>Item three</td></tr>
</tbody>
</table>
</div>
</div>
<!-- CLOSE ROW -->
</div>
<!-- CLOSE CONTAINER -->
<!-- SCRIPT FOR MATERIALIZE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- SCRIPTS FOR BOOTSTRAP -->
<!-- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> -->
<?!= include("table-js"); ?>
</body>
<footer>
<div class="container">
<div class="row" align="center">
Back to Main Menu
</div>
</div>
</footer>
</html>
Date objects are illegal as parameters between server and client. Convert them to strings using JSON.stringify() or use getDisplayValues() instead of getValues()
I have below code in my GetCourseList.cshtml file (view) that show fetched information from database :
#model IEnumerable<WebApplication8.Models.Courses>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width" />
<title>GetCourseList</title>
<style>
.table thead th,
.table tbody td {
text-align: center;
}
</style>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th scope="col" class="border-top-0 text-center">course name</th>
<th scope="col" class="border-top-0">unit</th>
<th scope="col" class="border-top-0">term</th>
<th scope="col" class="border-top-0">choose</th>
<th scope="col" class="border-top-0"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="align-middle">#item.name</td>
<td class="align-middle">#item.unit</td>
#if (item.term == 0)
{
<td class="align-middle">custom</td>
<td>
<input class="btn btn-success" type="checkbox" value=#item.name id=#item.course_id/>
</td>
}
else
{
<td class="align-middle">#item.term</td>
<td><input type="checkbox" value=#item.name id=#item.course_id /></td>
}
<td class="text-right align-middle">
#*<button type="button" class="btn btn-success">choose</button>*#
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
and I get below result from this view when I run the project :
I want that user choose favorite records , with those checkboxes , and then when pressed final button (this button is out of frame in my picture), id of this checkboxes insert in my database(related table).
think I should get checked checkboxes id's from my html page (but I don't know how?! please help me!) and pass this id's to the action and then execute insert query in my action .
so : I should pass each checked checkboxes id to the specific controller and collect them (for example collect all elements id's in an array) some one tell's me that i can map my view elements to the this array . but I don't give result from this approach . this is issue!
please help me to find out how can I do this . thank you
you can add property IsSelect in Model
Public bool IsSelect {get;set;}
and used
#Html.CheckBoxFor(m => m.IsSelect)
and in server checked which one of items selected
var idList = items.Where(x=>x.IsSelect).Select(x=>x.Id).ToList();
i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
This is my HTML file :
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="tableScript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div id="details"></div>
</body>
</html>
This is my JS file (tableScript.js) :
$(document).ready(function() {
var table = $('#example').DataTable( {
keys: true
} );
table
.on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
var rowData = datatable.row( cell.index().row ).data();
$('#details').html( 'Cell in '+rowData[0]+' focused' );
} )
.on( 'key-blur', function ( e, datatable, cell ) {
$('#details').html( 'No cell selected' );
} );
});
It doesn't show any information in (#details). Any idea what's wrong here ?
$(document).ready(function () {
var table = $('#example').DataTable({
keys: true
});
table
.on('key-focus', function (e, datatable, cell, originalEvent) {
var rowData = datatable.row(cell.index().row).data();
$('#details').html('Cell in ' + rowData[0] + ' focused');
})
.on('key-blur', function (e, datatable, cell) {
$('#details').html('No cell selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<th align="right">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="details"></div>
Note :- You need to add dataTables.keyTable to bind key events