Load CSV file data into HTML table

Load CSV file data into HTML table - javascript

I am trying to load data from an csv file to an html file and I want to have it displayed in a table.
My idea was to open the csv data and split it with this code in table rows and and then the cells for the rows.
This is my code so far. Maybe you can help me with what's wrong?
I am thankful for any idea!
<body>
<script src="jquery.min.js"></script>
<script>
function readCsv(data) {
var allRows = data.split(/\r?\n|\r/);
var table = "<table>";
for (var singleRow = 0; singleRow < allRows - length; singleRow++) {
if (singleRow === 0) {
table += "<thead>";
table += "<tr>";
} else {
table += "<tr>";
}
var rowCells = allRows[singleRow].split(',');
for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
if (singleRow === 0) {
table += "<th>";
table += rowCells[rowCell];
table += "</th>";
} else {
table += "<td>";
table += rowCells[rowCell];
table += "</td>";
}
if (singleRow === 0) {
table += "</tr>";
table += "</thead>";
table += "<tbody>";
} else {
table += "</tr>";
}
}
table += "</tbody>";
table += "</table>";
$("body").append(table);
}
$.ajax({
url: "world_data_v1.csv",
dataType: "text"
}).done(readCsv);
}
</script>
</body>
</html>

Your $.ajax should be outside readCsv and inside a $(document).(ready)

Related

I cant seem to get it straight with my search. Issues of strings and array are on my case

Here is my script for displaying loading data onto my table:
function my_data(result,j){
console.log(result);
var length = result.length;
console.log(length);
j = Number(j);
$('#news_data tbody').empty();
for(var i = 0 ; i < length; i++){
j+=1;
var tr = "<tr>";
tr += "<td>"+ j +"</td>";
tr += "<td><a href='"+ result[i].product_id +"' target='_blank'>"
+result[i].product_name +"</a></td>";
tr += "<td>"+ result[i].product_price +"</td>";
tr += "</tr>";
$('#news_data tbody').append(tr);
}
}
And here is my search:
$('#search_text').keyup(function () {
var search = $(this).val();
if (search != '') {
my_data(search);
} else {
my_data();
}
});
When I search I get the list of items filtered as undefined

How to get information in javascript to appear in html

The below code is supposed to make a shopping cart.However, I am unsure of how I do the conversion from javascript to html (I don't quite know how to describe it, sorry)
I am trying to have javascript build a table that has the values of the items within it, along with buttons to build the shopping cart. I initially was browsing the web to find how to do it, and thought that using document.getElementById().innerhtml would work, and referencing it in the body, however it seems that it is not functioning as intended.
<!DOCTYPE html>
<html>
<head>
<title>
ACME Corp Shopping Cart
</title>
<link rel = "stylesheet" href = "shopstyle.css">
<script type = "text/javascript", language = "javascript">
alert("YAS");
var products = [];
var cart = [];
//label individual products below in individual lists, and then have the product put through the product_setup function
var product1 = ["Anvil", "Premium Grade Iron", 119.99];
var product2 = ["Female Roadrunner Costume", "Guaranteed to attract Male Roadrunners", 54.99];
function product_setup(product){
var productID = product[0];
var product_desc = product[1];
var qty = 1;
var price = product[2];
var newProduct = {
product_id: null,
product_desc: null,
product_qty: 0,
product_price: 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
}
product_setup(product1);
product_setup(product2);
function product_table() {
var html = "<table border = '1|1' >";
html += "<td>Product Name</td>";
html += "<td>Product Description</td>";
html += "<td>Price</td>";
html += "<td>Add to Cart</td>";
for (var i = 0; i < products.length; i ++) {
html += "<tr>";
html += "<td>" + products[i].product_name + "</td>";
html += "<td>" + products[i].product_desc + "</td>";
html += "<td>" + products[i].product_price + "</td>";
html += "<td>" + <button type = 'submit' onclick = 'addCart(products[i].product_name, this)'>Add to Cart</button> + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("location1").innerHTML = html;
}
product_table();
function addCart(product_id) {
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
var cartItem = null;
for (var k = 0; k < cart.length; k++) {
if (cart[k].product.product_id == products[i].product_id) {
cartItem = cart[k];
cart[k].product_qty++;
break;
}
}
if (cartItem == null) {
cartItem = {
product: products[i],
product_qty: products[i].product_qty
};
cart.push(cartItem);
}
}
}
renderCartTable();
}
function subtractQuantity(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart[i].product_qty--;
}
if (cart[i].product_qty == 0) {
cart.splice(i,1);
}
}
renderCartTable();
}
function addQuantity(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart[i].product_qty++;
}
}
renderCartTable();
}
function removeItem(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart.splice(i,1);
}
}
renderCartTable();
}
function renderCartTable() {
var html = '';
var ele = document.getElementById("location2");
ele.innerHTML = '';
html += "<table id='tblCart' border='1|1'>";
html += "<tr><td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Total</td>";
html += "<td>Action</td></tr>";
var GrandTotal = 0;
for (var i = 0; i < cart.length; i++) {
html += "<tr>";
html += "<td>" + cart[i].product.product_id + "</td>";
html += "<td>" + cart[i].product.product_desc + "</td>";
html += "<td>" + cart[i].product_qty + "</td>";
html += "<td>" + cart[i].product.product_price + "</td>";
html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty, 10) + "</td>";
html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Item</button> &nbsp <button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Item</button> &nbsp<button type='submit' onClick='removeItem(\"" + cart[i].product.product_id + "\", this);'/>Remove Item</button></td>";
html += "</tr>";
GrandTotal += parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty, 10);
}
document.getElementById("location3").innerHTML = GrandTotal;
html += "</table>";
ele.innerHTML = html;
}
renderCartTable();
</script>
</head>
<body>
<br>
<p id="location1"> </p>
<br/>
<h2> Shopping Cart </h2>
<p id="location2"> </p>
<h2>Grand Total:</h2>
<p id="location3"> </p>
</body>
</html>

It is always considered the best when you include your <script> tags after <body>. DOM elements that you try to access in your script are usually available only after the entire page has loaded. Your script should start running only after web page's body is created since you're expecting contents to be added to <body>

how to Show edit and delete buttons in html dynamic table using java script

function ViewTable(data)
{
var html = '<table>';
html += '<tr>';
for (var j in data[0]) {
html += '<th>' + j + '</th>';
}
html += '</tr>';
for (var i = 0; i < data.length; i++) {
html += '<tr>';
for (var j in data[i]) {
html += '<td>' + data[i][j] + '</td>';
}
}
html += '</table>';
document.getElementById('divRecords').innerHTML = html;
}
I want to add edit and delete bottons on end of each row
Please someone help me to get out of this.

The following should work.
var html = '<table>';
html += '<tr>';
for (var j in data[0]) {
html += '<th>' + j + '</th>';
}
html += '<th colspan="2">Actions</th>'
html += '</tr>';
for (var i = 0; i < data.length; i++) {
html += '<tr>';
for (var j in data[i]) {
html += '<td>' + data[i][j] + '</td>';
}
html += '<td><a href="#">edit</td><td> | <a href="#">delete</td></tr>';
}
html += '</table>';
document.getElementById('divRecords').innerHTML = html;
The sample data:
var data = [
[1, 2],
[3, 4],
[5, 6]
];
The table appeared as follows

Generate HTML table and load it in div element

I'd like to load a HTML table into a div-element (id="resultDataDistancesTable") - but the generated string isn't processed (no matter if I use html(), append() or innerHTML). There is no error in the console.
When I paste the console.log(..) output directly to the HTML page I get the table that I want - so why doesn't my JavaScript code work? Is something wrong with the string?
var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]};
buildResultTableDistances();
function buildResultTableDistances() {
var tbl;
var tr_head = "<table><tr><td>distances [meters]</td>";
for (var i = 0; i < 20; i++) {
tr_head += "<td><b>" + "dummy" + "</b></td>";
}
tr_head += "</tr>";
tbl = tr_head;
for (var i = 0; i < 20; i++) {
var row = "<tr><td><b>" + "dummy" + "</b></td>";
for (var ii = 0; ii < 20; ii++) {
row += "<td>" + response.distances[i][ii] + "</td>";
}
row += "</tr>";
tbl += row;
}
tbl += "</table>";
console.log(tbl);
$('#resultDataDistancesTable').html(tbl);
}

I suspect you forgot to insert the HTML or including jQuery, because it works fine here. If you want, to do this solely in JavaScript by adding the element in jQuery:
$(document.body).append('<div id="resultDataDistancesTable"></div>');
var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]};
buildResultTableDistances();
function buildResultTableDistances() {
var tbl;
var tr_head = "<table><tr><td>distances [meters]</td>";
for (var i = 0; i < 20; i++) {
tr_head += "<td><b>" + "dummy" + "</b></td>";
}
tr_head += "</tr>";
tbl = tr_head;
for (var i = 0; i < 20; i++) {
var row = "<tr><td><b>" + "dummy" + "</b></td>";
for (var ii = 0; ii < 20; ii++) {
row += "<td>" + response.distances[i][ii] + "</td>";
}
row += "</tr>";
tbl += row;
}
tbl += "</table>";
$('#resultDataDistancesTable').html(tbl);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultDataDistancesTable"></div>

I could replicate your issue using Plunker: http://plnkr.co/edit/QxklTx0R6WcYwpRIpd98 has the fix. You weren't waiting for the DOM to be loaded before attempting to append to the object. See line 3:
$("document").ready(function() {
buildResultTableDistances();
});
Should work then.

Add pagination to dynamically created html table

I am trying to add pagination to a dynamically generated html . I have added these scripts in my Default.aspx page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<script type ="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel ="stylesheet" type=" text/css" href=" https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<div id = resultDiv></div>
The table will appear in this div.
The table is being created dynamically after obtaining a JSON response from a web service
My JS file looks like this
$.ajax({
url: 'cannot mention',
method: 'get',
data: requestData,
dataType: 'json',
success: function (data) {
var ordersArray = data.orders;
var i;
var k;
var quantityArray;
var out = "<legend class='bluefont'><b><span id='info'>FOD</span></b></legend>"
out += "<table id ='tableresult' border='2px' style='font-size: 8pt '>";
out += "<tr><th> Order Date</th>";
for (i = 0; i < ordersArray.length; i++) {
out += "<td>" + ordersArray[i].orderDate + "</td>";
}
out += "</tr>";
out += "<tr><th>Delivery Date</th>";
for (i = 0; i < ordersArray.length; i++) {
out += "<td>" + ordersArray[i].deliveryDate + "</td>";
}
out += "</tr>";
out += "<tr><th>Quantity</th>";
for (i = 0; i < ordersArray.length; i++) {
quantityArray = ordersArray[i].order
for (k = 0; k < quantityArray.length ; k++){
out += "<td>" + quantityArray[k].quantity + "</td>";
}
}
out += "</tr>";
out += "</table>";
document.getElementById("resultDiv").innerHTML = out;
document.getElementById("tableresult").dataTable
It says dataTable is not a function. Please help

You need to jQuery object to initialize jQuery DataTables. For example:
$('#tableresult').DataTable();

We Keep Coding

JavaScript is the programming language of the Web.

Load CSV file data into HTML table - javascript

Your $.ajax should be outside readCsv and inside a $(document).(ready)

Related

I cant seem to get it straight with my search. Issues of strings and array are on my case

How to get information in javascript to appear in html

how to Show edit and delete buttons in html dynamic table using java script

Generate HTML table and load it in div element

Add pagination to dynamically created html table

Categories

Resources