I am using https://www.npmjs.com/package/grunt-mustache-render to render a HTML file using a layout file and json file.
Here is the Grunt task:
mustache_render: {
json_data: {
files: [
{
data: 'output.json',
template: 'test.mustache',
dest: 'tmp/hello_json.html'
}
]
}
}
Output JSON looks like this:
[
{
"name": "John Doe",
"age": "30"
},
{
"name": "Alex Len",
"age": "27"
},
{
"name": "Debbie John",
"age": "36"
}
]
test.mustache looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mustache Sample</title>
</head>
<body>
<h2>Titles</h2>
<ul id="talktitles">
<script id="speakers-template" type="text/template">
{{#options}}
<li>{{{name}}}, {{{age}}}</li>
{{/options}}
</script>
</ul>
</body>
</html>
When I run grunt it created the tmp/hello_json.html file but the values are not populated. It looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mustache Sample</title>
</head>
<body>
<h2>Titles</h2>
<ul id="talktitles">
<script id="speakers-template" type="text/template">
</script>
</ul>
</body>
</html>
What am I doing wrong here?
Your output.json doesn't conform with template. Template waits options value in json file, but there is not such key.
Correct output json should be like this one:
{
options: [{
"name": "John Doe",
"age": "30"
}, {
"name": "Alex Len",
"age": "27"
}, {
"name": "Debbie John",
"age": "36"
}]
}
Addition
Also you have an ability to refer root of the json file with .
So you can change your template part to this
{{#.}}
<li>{{{name}}}, {{{age}}}</li>
{{/.}}
Related
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!
I have a problem with choices order in surveyjs, I want to make random choices order except 1 value (example: camel) always at bottom.
var json = {
"elements": [{
"type": "imagepicker",
"name": "Picture",
"title": "What animal would you like to see first ?",
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}, {
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
}, {
"value": "panda",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
}, {
"value": "camel",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
}]
}]};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName('Picture');
q.choicesOrder = "random";
q.showLabel = "true";
I've created an example with your code and latest SurveyJS. It looks ok for me.
Could you please try to update SurveyJS version to the latest. Thanks.
Survey
.StylesManager
.applyTheme("default");
var json = {
"elements": [{
"type": "imagepicker",
"name": "Picture",
"title": "What animal would you like to see first ?",
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}, {
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
}, {
"value": "panda",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
}, {
"value": "camel",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
}]
}]};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName('Picture');
q.choicesOrder = "random";
q.showLabel = "true";
$("#surveyElement").Survey({model: survey});
<!DOCTYPE html>
<html>
<head>
<title>One choice - Radio Group question, jQuery Survey Library Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.0.53/survey.jquery.js"></script>
<link href="https://surveyjs.azureedge.net/1.0.53/survey.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="surveyElement"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
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 new to JSON and also AngularJS. I'm trying to access data elements in a deeply nested remote json file. I can manage to render the whole JSON results in my view. However, I can't seem to target the elements that are in an array deep inside the JSON. It's from Yahoo Currency.
This is my controller and view that renders the entire JSON file:
controller
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$http.jsonp('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fwebservice%2Fv1%2Fsymbols%2Fallcurrencies%2Fquote%3Fformat%3Djson%22&format=jsonp&callback=JSON_CALLBACK').success(function (data) {
$scope.data = data;
});
});
view
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from JSON feed</h1>
<ul>
<li ng-repeat="row in data">
{{ data }}
</li>
</ul>
</body>
</html>
I tried writing the controller like this:
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$http.jsonp('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fwebservice%2Fv1%2Fsymbols%2Fallcurrencies%2Fquote%3Fformat%3Djson%22&format=jsonp&callback=JSON_CALLBACK').success(function (data) {
var pair = { name };
// $scope.data = data;
if(data) {
if (data.results) {
pair.name = data.results.list.resources[0].resource.fields.name;
}
}
});
});
But that doesn't work. Here is the JSON (partial) .. I'm trying to access the "name", "price", and "utctimestamp" fields for each resource:
{
"query": {
"count": 1,
"created": "2015-11-07T05:42:03Z",
"lang": "en-US",
"diagnostics": {
"publiclyCallable": "true",
"url": {
"execution-start-time": "0",
"execution-stop-time": "23",
"execution-time": "23",
"content": "http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json"
},
"user-time": "25",
"service-time": "23",
"build-version": "0.2.311"
},
"results": {
"list": {
"meta": {
"type": "resource-list",
"start": "0",
"count": "173"
},
"resources": [
{
"resource": {
"classname": "Quote",
"fields": {
"name": "USD/KRW",
"price": "1152.994995",
"symbol": "KRW=X",
"ts": "1446874620",
"type": "currency",
"utctime": "2015-11-07T05:37:00+0000",
"volume": "0"
}
}
},
{
"resource": {
"classname": "Quote",
"fields": {
"name": "SILVER 1 OZ 999 NY",
"price": "0.068046",
"symbol": "XAG=X",
"ts": "1446850711",
"type": "currency",
"utctime": "2015-11-06T22:58:31+0000",
"volume": "100"
}
}
},
{
"resource": {
"classname": "Quote",
"fields": {
"name": "USD/VND",
"price": "22364.000000",
"symbol": "VND=X",
"ts": "1446874620",
"type": "currency",
"utctime": "2015-11-07T05:37:00+0000",
"volume": "0"
}
}
},
...
For what it's worth, jsonp seems to return some kind of xml-looking stuff when I append the callback=JSON_CALLBACK to the url, like this:
JSON_CALLBACK({"query":{"count":"1","created":"2015-11-07T16:08:29Z","lang":"en-US"},"results":["<list><meta><type>resource-list</type><start>0</start><count>173</count></meta><resources><resource><classname>Quote</classname><fields><name>USD/KRW</name><price>1152.994995</price><symbol>KRW=X</symbol><ts>1446900900</ts><type>currency</type><utctime>2015-11-07T12:55:00+0000</utctime><volume>0</volume></fields></resource></resources><resources><resource><classname>Quote</classname><fields><name>SILVER 1 OZ 999 NY</name><price>0.068046</price><symbol>XAG=X</symbol><ts>1446850711</ts><type>currency</type><utctime>2015-11-06T22:58:31+0000</utctime><volume>100</volume></fields></resource></resources><resources><resource>
...
Is there a problem with how I'm using JSONp? I'm getting the data set rendered to my view (above) but it's all in the funky xml syntax. How to go about grabbing the 3 values I need from that to an array and rendering in a <ul>??
You can use your original controller, you only had problems in the view. It would work if you substitute it by this one:
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from JSON feed</h1>
<ul>
<li ng-repeat="res in data.query.results.list.resources">
{{ res.resource.fields.name }}: {{ res.resource.fields.price }}, {{ res.resource.fields.utctime }}
</li>
</ul>
</body>
</html>
Here is the Plunker using your JSON example: http://plnkr.co/edit/wzF5t9dTZt49n5eq9N1L?p=preview
I am new to javascript and am trying to process a simple JSON response from an API. But when i run the following code i get nothing.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.getJSON('http://76.233.189.148:5000/index.json', function(result){
document.write(result.datasets);
});
});
</script>
</head>
<body>
</body>
</html>
I know the API is working since from:
http://76.233.189.148:5000/index.json
it returns:
{
"datasets": [
{
"id": "20150803-183949-44df",
"name": "Train0010",
"status": "Done"
}
],
"models": [
{
"id": "20150803-184058-97ff",
"name": "train0010_alex",
"status": "Done"
}
]
}
What am i doing wrong here?