I have had a look around on here and a number of other sites for the correct way to create an HTML table from and external json link and have come up with the below.
I am trying to pull the username and number of votes and display them in the table, multiple rows are created, all populated with "undefined".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=[REMOVED]&month=current&format=json", function(data){
var ragnarok_data = '';
$.each(data, function(val){
ragnarok_data += '<tr>';
ragnarok_data += '<td>'+val.nickname+'</td>';
ragnarok_data += '<td>'+val.votes+'</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
I can see that others have run into this issue too, however, this is my first time diving into Javascript; the other questions have completely different code and the answers dont seem to work here. Any help would be much appreciated, thanks.
Just use a .forEach on data.voters.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
var ragnarok_data = '';
data.voters.forEach(function (val) {
ragnarok_data += '<tr>';
ragnarok_data += '<td>' + val.nickname + '</td>';
ragnarok_data += '<td>' + val.votes + '</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
Or, if you are dead set on jQuery, modify your $.each to be on the array you want data from data.voters, and to properly get the value:
$.each(data.voters, function (ignore, val) {
The second argument is the value, the first argument is the index. See more here:
https://api.jquery.com/jQuery.each/
You can use .each as below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
var ragnarok_data = '';
/*data.voters.forEach(function (val) {
*/
$(jQuery.parseJSON(JSON.stringify(data.voters))).each(function() {
ragnarok_data += '<tr>';
ragnarok_data += '<td>' + this.nickname + '</td>';
ragnarok_data += '<td>' + this.votes + '</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
Related
Hello i would like to add a static row that is bolded to serve as the header of the table generated from the script below, i don't want to put the headers on the csv file but on the html file itself in that way the header its always unchanged.
Thank you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"employee.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
You would just need at add a static header html element to your function before you start looping in the data.
Something like:
var table_data = '<table class="table table-bordered table-striped">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>';
I want to display this layout in 5 rows at a time type using DataTable
so, please help me with this.
I tried many things but I'm unable to do it.
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"iguana.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r/);
var table_data = '<table class="table table-bordered table-sm table-responsive table-striped table-hover ">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
},
complete: function (data) {
$('#employee_table').DataTable();
alert("AJAX request successfully completed");
}
});
});
});
</script>
I want to display this layout in 5 rows at a time type using DataTable
so, please help me with this.
I tried many things but I'm unable to do it.
is there any way so I can achieve this?
You are trying to convert div as datatable.
Add one class in table tag, which will represent your table. Let's add myDataTable in table tag.
var table_data = '<table class="myDataTable table table-bordered table-sm table-responsive table-striped table-hover">';
now, convert the table to Datatable by replacing your code
$('#employee_table').DataTable(); // employee_table is actually an id of div
to
$('.myDataTable').DataTable(); // class that added in table tag
I want to sort the table data as alphabetical order. The HTML needs not to be reloaded again.
The JSON data hosted on an online server, The button can be added when clicking the table should be sorted automatically with the column "title" alphabetically.
$(document).ready(function() {
$.getJSON("my json file", function(data) {
var movie_data = '';
$.each(data.movies, function(key, value) {
movie_data += '<tr>';
movie_data += '<td>' + value.title + '</td>';
movie_data += '<td>' + value['imdb-id'] + '</td>';
movie_data += '<td>' + value.rank + '</td>';
movie_data += '<td>' + value.rating + '</td>';
movie_data += '<td>' + value['rating-count'] + '</td>';
movie_data += '<tr>';
});
$('#movie_table').append(movie_data);
});
});
<!DOCTYPE html>
<html>
<head>
<title>JSON data to HTML table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1>TOP MOVIES</h1>
<br />
<table class="table table-bordered table-striped" id="movie_table">
<tr>
<th>Title</th>
<th>IMDB-ID</th>
<th>RANK</th>
<th>RATING</th>
<th>RATING-COUNT</th>
</tr>
</table>
</div>
</div>
</body>
</html>
I'd do something like this:
$(document).ready(function() {
var data = null;
$.getJSON("my json file", function(jsonData) {
data = jsonData.movies;
reloadTable();
});
$("#btn-sort").click(function() {
data.sort(function(a,b) {
return a.title < b.title ? -1 : 1;
});
reloadTable();
});
function reloadTable() {
var movie_data = '';
$.each(data.movies, function(key, value) {
movie_data += '<tr>';
movie_data += '<td>' + value.title + '</td>';
movie_data += '<td>' + value['imdb-id'] + '</td>';
movie_data += '<td>' + value.rank + '</td>';
movie_data += '<td>' + value.rating + '</td>';
movie_data += '<td>' + value['rating-count'] + '</td>';
movie_data += '<tr>';
});
$('#movie_table').slice(1).remove(); // To remove everything except first row
$('#movie_table').append(movie_data);
}
});
<!DOCTYPE html>
<html>
<head>
<title>JSON data to HTML table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1>TOP MOVIES</h1>
<button id="btn-sort">Sort</button>
<br />
<table class="table table-bordered table-striped" id="movie_table">
<tr>
<th>Title</th>
<th>IMDB-ID</th>
<th>RANK</th>
<th>RATING</th>
<th>RATING-COUNT</th>
</tr>
</table>
</div>
</div>
</body>
</html>
I am extracting data from Firebase database using Javascript. I list them with table. I need to paging because this data is quite a lot. I did not apply the paging method in the following link to my script and this paging works.
JS Pagination URL:
https://datatables.net/examples/styling/bootstrap
My problem is that the data comes from the database, so this script doesn't see my data and doesn't paging them and writes in index.html. "No data available in table"
This is because this paging function runs immediately when the script is first loaded.
Function:
$(document).ready(function() {
$('#userlist-table').DataTable();
} );
It also works great when I put the data loaded from the database into the "table" as HTML.
<tbody><tr id="++-LstSrLoH2UdYFvYJRn9" role="row" class="odd"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr><tr id="++-LstSrLoH2UdYFvYJRnA" role="row" class="even"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr><tr id="++-LstSrLoH2UdYFvYJRnB" role="row" class="odd"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr><tr id="++-LstSrLoH2UdYFvYJRnC" role="row" class="even"><td class="sorting_1">John Doe</td><td>A</td><td>Melbourne</td></tr></tbody>
Somehow I have to run this function a little later and introduce the data in the table in the HTML to the paging function. I tried to use a timer, but I didn't get results and I wasn't able to generate an idea because I was new to JS. How can I solve this problem? I'm sorry about my bad English.
My HTML:
<head>
<!-- jquery latest version -->
<script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
<!-- table pagination css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</head>
<body>
<table id="userlist-table" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr id="tr">
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
</table>
</body>
My Script:
var database = firebase.database().ref('MyDatabase');
database.once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr id="' + "++" + data.key + '">';
content += '<td>' + val.name + '</td>';
content += '<td>' + val.position + '</td>';
content += '<td>' + val.office + '</td>';
content += '</tr>';
});
$('#userlist-table').append(content);
}
});
$(document).ready(function() {
$('#userlist-table').DataTable();
} );
Yeah. I finally found the problem. This is because the ready paging script I used needs " ". I added a hollow "tbody" to the ready set and filled it with data from the Firebase database. Then, when the script was loaded, I ran the paging function with the timer and everything seems to be running smoothly. It can solve the problem if someone needs it.
My HTML:
<head>
<!-- jquery latest version -->
<script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
<!-- table pagination css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</head>
<body>
<table id="userlist-table" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr id="tr">
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody></tbody>//add this element for pagination script
</table>
</body>
My Script:
var database = firebase.database().ref('MyDatabase');
window.setTimeout(getDatas, 2000);//add this line for timer with ur function for load datas
database.once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr id="' + "++" + data.key + '">';
content += '<td>' + val.name + '</td>';
content += '<td>' + val.position + '</td>';
content += '<td>' + val.office + '</td>';
content += '</tr>';
});
$('#userlist-table').append(content);
}
});
function getDatas(){
$('#userlist-table').DataTable();
} //add this function, when loaded page, works it with timer
I have csv and html file in same s3 bucket, to access this I used cloudFront and mapped it to this bucket.
Now , I want to load this csv data in html but its not showing anything.
My cloudfront url can access both files but its not load and nothing showing.
here is my code:
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"https://cloudfronturl/inventory.csv",
dataType:"text",
success:function(data)
{
alert("Here's lots of data, just a string: " + data);
var isv_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<isv_data.length; count++)
{
var cell_data = isv_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#isv_details').html(table_data);
}
});
});
});
<html>
<head>
<title>ISV Details</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">ISV Details</h1>
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="isv_details">
</div>
</div>
</div>
</body>
</html>
This has been resolved , it was due to bug in chrom where it is try to find some favicon.io which is not exist and it was resolved by adding:
<link rel="icon" href="data:;base64,=">