I want Tabulator to automatically load data from a JSON file.
I have made it work with a button.
I have read the q & a here
Load table data from text file
I have also read the documentation here.
http://tabulator.info/docs/4.4/data#array-initial
(By the way, I was expecting the ajaxURL documentation to show a URL ending with a FILE name rather than "/now"... something like $("#div1").load("demo_test.txt"); )
I'm not a professional developer so please be gentle with me.
Here is the content of the JSON file (called "test_Array.txt" and in the same directory as the HTML).
[
{"name": "Oli Bob", "age": "12", "col": "red", "dob": "14/05/1982"},
{"name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"},
{"name": "Christine Lobowski", "age": "42", "col": "green", "dob": "22/05/1982"},
{"name": "Brendon Philips", "age": "125", "col": "orange", "dob": "01/08/1980"},
{"name": "Margret Marmajuke", "age": "16", "col": "yellow", "dob": "31/01/1999"}
]
It passes validation at
https://jsonlint.com/
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables#5.1.3/dist/css/tabulator_site.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#5.1.3/dist/js/tabulator.min.js"></script>
<meta charset="utf-8" />
<title>tabulator3</title>
</head>
<body>
<div id="example-table"></div>
<script>
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205,
// set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
//layout:"fitDataFill",//fit columns to fit data and width of table (optional)
//data:tableData, //set initial table data
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
]
});
//load sample data into the table
table.setData("test_Array.txt")
</script>
</body>
</html>
What am I doing wrong?
Thank you.
To start off I would say you have posted a link to the v4.4 documentation, but using version 5.1 of Tabulator. It is defo worth reading the correct docs to get started :)
Following on from that the issue that you are experiencing is because as of version 5.0 Tabulator now has an async start up process that means you cant just call setData straight after instantiating the table, you must wait for the tableBuilt event:
table.on("tableBuilt", function(){
table.setData("./test_Array.txt");
});
More importantly if you are just loading data straight from the file then there is no need to set data after the table has been built, you can use the ajaxURL setup option to load the data into the table while it is being built:
var table = new Tabulator("#example-table", {
ajaxURL:"./test_Array.txt",
... other table options
});
As a complete aside if the text file just contains JSON data, then the convention is to end the file with .json instead of .txt
For any other novices/amateurs out there....following Oli's advice I have a working solution as follows:
Create a JSON file called text_Array.json with the following content:
[
{"name": "Oli Bob", "age": "12", "col": "red", "dob": "14/05/1982"},
{"name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"},
{"name": "Christine Lobowski", "age": "42", "col": "green", "dob": "22/05/1982"},
{"name": "Brendon Philips", "age": "125", "col": "orange", "dob": "01/08/1980"},
{"name": "Margret Marmajuke", "age": "16", "col": "yellow", "dob": "31/01/1999"}
]
Create an html file called tabulator3.html with the following content. Put the JSON file in the same folder as the HTML file and it will work :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables#5.1.3/dist/css/tabulator_site.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#5.1.3/dist/js/tabulator.min.js"></script>
<!-- the line below is necessary for the Date sorter to work - it is buried in the v5.1 documentation here
http://tabulator.info/docs/5.1/sort#func-builtin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script>
<meta charset="utf-8" />
<title>tabulator3</title>
</head>
<body>
<div id="example-table"></div>
<script>
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
ajaxURL:"test_Array.json", //load sample data into the table
height:205,
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
]
});
</script>
</body>
</html>
Thanks, Oli!
Related
I'm following a tutorial on how to create dynamically updating comments within a form. The guide I'm following keeps presenting errors and the one I have just recently found is not letting me fix it. it's telling me that I need to move 'var' declarations to the top of the function. There is also no definition of '$'
Any help is appreciated!
Here's is my JavaSript
var comment = [
{"name": "name1", "date": "00-00-0000", "body": "comment here1"},
{"name": "name2", "date": "00-00-0000", "body": "comment here2"},
{"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
for (var i=0;i<comment.length;i++){
var html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
$('#container').append(html);
}
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<title> Reviews</title>
<link href="css/Review.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class='form'>
<h3>Please write a review about your stay</h3>
Name: <input type="text" id="name"/> <br> <br>
Date: <input type="date" id="date"/> <br> <br>
Comment: <textarea rows="7" col="30" id="bodyText"></textarea><br>
<input type="button" id="addComment" value="Submit">
</div>
<h2>Comments</h2>
<div id='container'>
</div>
Go to Homepage
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script>
<script src="Review.jquery.js" type="text/javascript"></script>
</body>
</html>
The linter is telling you that you should declare i and comment at the same point that the interpreter sees the variable is declared, which will either be at the top of the innermost function, or if you're on the top level already, at the very top of the top level. For example, for your code:
var i;
var comment;
var html;
comment = [
{"name": "name1", "date": "00-00-0000", "body": "comment here1"},
{"name": "name2", "date": "00-00-0000", "body": "comment here2"},
{"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
for (i=0;i<comment.length;i++){
html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
$('#container').append(html);
}
If you don't do this, you can confuse yourself due to var's unintuitive hoisting problems - that's what the linting rule is for. (It's not a Javascript interpreter error, it's only an error thrown by your linter.)
That said, you might consider using modern syntax instead, with const and let, which are not hoisted, and you can use array methods instead of for loops for more functional and terse code, if you wish:
const comment = [
{"name": "name1", "date": "00-00-0000", "body": "comment here1"},
{"name": "name2", "date": "00-00-0000", "body": "comment here2"},
{"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
comment.forEach(({ name, date, body }) => {
const html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+name+"</span><div class='date'>"+.date+"</div><p>"+body+"</p></div><div class='clear'></div></div>"
$('#container').append(html);
});
You also might consider using a modern linter, like ESLint. JSLint is quite old and does not understand much of the nice syntax sugar modern JS allows us.
I'm trying to load local html page using webbrowser tool in Winforms but I got script error message and my page won't load, when I open that page using any web browser it opens with no problem at all! I tried some solutions as editing registry but no fix.
my html page has jscript code and this is the code in my page:
<html>
<head>
<script type="text/javascript"src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript"src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
var csatGauge = new FusionCharts({
"type": "angulargauge",
"renderAt": "chart-container",
"width": "400",
"height": "250",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
}
}
});
csatGauge.render();
});
</script>
</head>
<body>
<div id="chart-container">An angular guage will load here!</div>
</body>
</html>
I've managed to solve it by adding this code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
I'm still not sure if this is only thing needed or it worked with the change of the registry: solution
Hi i have 2 different domain, my json file available in domain1.com and my ajax calling (html) file in domain2.com. Now i am trying to print the following json data into my html page.
[{
"userID": 506,
"userName": "Alan",
"userAge": "alan#somewhere.com",
"userGender": "male",
"userNo": 5,
"userStreet": "abx,street",
"userCity": "chennai",
"userCountry": "singapore",
"userPostal": "545445",
"userProduct": "samsung",
"userQty": "4",
"userPrice": "600"
}, {
"userID": 566,
"userName": "bob",
"userAge": "bob#somewhere.com",
"userGender": "female",
"userNo": 8,
"userStreet": "box,street",
"userCity": "hydrbad",
"userCountry": "USA",
"userPostal": "8787",
"userProduct": "PIXEL",
"userQty": "7",
"userPrice": "3400"
}]
i am trying to display the above mentioned json data into my html page using the following code, but i am not getting anything. Anybody can help me in this?
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//alert("hi");
$.ajax({
url: 'http://stemgy.com/d.json',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
alert(dataWeGotViaJsonp);
var text = '';
var len = dataWeGotViaJsonp.length;
alert(len);
}
});
})
</script>
</head>
<body>
<div id='response'></div>
</body>
I have just started learning angularjs, I'm trying to load data from my json file on view. json file has a list of houses. But does not get showed on my view when I load the index.html file.
Data.json
[
{
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place! Really nice view!"
},
{
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for large family."
},
{
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighourhood and lot's of nice green space."
},
]
cribsFactory.js
angular
.module('ngCribs')
.factory('cribsFactory', function($http) {
function getCribs() {
return $http.get('data/data.json');
}
return {
getCribs: getCribs
}
});
cribsController.js
angular
.module('ngCribs')
.controller('cribsController', function($scope, cribsFactory) {
$scope.cribs;
cribsFactory.getCribs().success(function(data) {
$scope.cribs = data;
}).error(function(error) {
console.log(error);
});
});
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ng-cribbs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<div class="well" ng-repeat="crib in cribs">
<h3>{{ crib.address }}</h3>
<p>
<strong>Type: </strong>{{ crib.type }}</p>
<p>
<strong>Description: </strong>{{ crib.description }}</p>
<p>
<strong>Price: </strong>{{ crib.price | currency }}</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"/>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"/>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"/>
</script>
<script src="app.js"/>
</script>
<script src="scripts/cribsController.js"/>
</script>
<script src="scripts/cribsFactory.js"/>
</script>
</html>
I'm trying to run the above code in htdocs folder of XAMPP. The folder structure is in the screen shot below.
The json file is inside the data folder and the files cribsFactory.js & cribsController.js are in scripts folder. When i type the URL "http://localhost/ng-cribbs/" in Firefox the output is a completely blank page with no error message of any sort hence the difficulty in debugging.
I was able to load data using an array but facing problem while using JSON file.. Can't understand what I'm doing wrong. Please help!!
Your json data was not valid, validate any json data before and you can use the below corrected json. Hope it helps! validate json here
[{
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place! Really nice view!"
}, {
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for large family."
}, {
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighourhood and lot's of nice green space."
}]
Your http call gives you a json string, you should convert it to a javascript array like so: $scope.cribs = JSON.parse(data)
I am trying to create a searchable array in JS. I want the arrays to work as only the images show, then using 'tags' to filter and search this array.
If I were to have something along the lines of this:
function NotebookListCtrl($scope) {
$scope.notebooks = [
{"name": "Lenovo",
"processor": "Intel i5",
"age": 2011},
//more notebooks...
{"name": "Toshiba",
"processor": "Intel i7",
"age": 2010},
];
$scope.orderList = "name";
}
Is there a way I can use something along the lines of...
notebooks[0] = new Image();
notebooks[0].src = 'images/img/image1.jpg';
So when notebooks item [0] is displayed, it will show the image along with it?
Relatively new to JS and am trying to piece something together. Thanks for the help!
My advice would be avoid using Image object, unless you need to pre-load your images in your JS code, and only store the img src path for each product in your array like in:
$scope.notebooks = [
{"name": "Lenovo",
"processor": "Intel i5",
"age": 2011
"img": "images/img/image1.jpg"
},
// ...
Then in your img tag you can just point to the source of each product accordingly.
You can configure your web server to tell the browser to cache the images so it would enhance img loading time.
No need to create a new image. This has more to do with html and displaying of the image than anything else:
function NotebookListCtrl($scope) {
$scope.notebooks = [
{"name": "Lenovo",
"processor": "Intel i5",
"age": 2011,
"src": 'images/img/image1.jpg'
},
//more notebooks...
{"name": "Toshiba",
"processor": "Intel i7",
"age": 2010,
"src": 'images/img/image2.jpg'
},
];
$scope.orderList = "name";
}
<div
ng-repeat="notebook in notebooks | orderby: orderList">
<p>name: {{notebook.name}}</p>
<p>processor: {{notebook.processor}}</p>
<p>age: {{notebook.age}}</p>
<img
ng-if="notebook.src"
ng-src="{{notebook.src}}">
</div>
Just set the image source and use the ng-src attribute in html to set the image source.