I'm trying to use jquery.dataTables with an Ajax data source to pull json data into a html table.
I'm facing an issue where it's not able to find the data I'm looking for in the JSON response and I'm struggling to find where my issue lies. I'm getting an undefined error as it's not able to match the data columns I requested.
In the Snipped-I removed the URL but here's a sample of the object structure returned.
{
"success": true,
"result": [
{
"type": "gift",
"name": "Gift",
"rewards": [
{
"name": "Item Name",
"image_url": "https://xxx.jpg",
"minimum_display_price": "500+ bucks",
"description": {
"text": "text here",
"html": "html here"
},
"disclaimer_html": "disclaimer",
"warning": null,
"denominations": [
{
"id": "5ca1737f1sdasdsadsad2cb5f004cc0d564",
"name": "Name",
"price": 500,
"display_price": "500",
"available": true
}
]
}
]
}
]
}
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "myurlishere",
"columns": [
{ "result[0]": "name" }
//{ "result": "rewards.name"}
// {"data": "name"}
]
} );
} );
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" type="text/javascript"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
</tr>
</tfoot>
</table>
Looks like you have some nested data objects and while it might be possible to deal with this directly within DataTable it's likely easier to pre-process the data before handing it off to DataTable for rendering. This would convert your nested data into a flat array of reward objects, which should make rendering it easier.
(async function() {
const rawData = await fetch("your_url").then(data => data.json());
const finalData = rawData.result.map(category => category.rewards).flat(1);
$("#example").DataTable({
data: finalData,
columns: [{ data: "name" }]
});
})();
Might be you need to change your code , just check following way,
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "myurlishere",
"columns": [
{ "data": "name" },
{ "data": "rewards[, ].name" },
{ "data": "rewards[, ].image_url" },
{ "data": "rewards[, ].description.text" },
{ "data": "rewards[, ].denominations[,].name" },
]
} );
} );
Related
I have been having problems generating a JsTree using data from my server. I have tried different formats and appending an existing tree, no dice. The only thing that happens is that it the jstree div gets replaced by
<div id="jstree" class="jstree jstree-1 jstree-default jstree-leaf" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_loading" aria-busy="false"><ul class="jstree-container-ul jstree-children" role="group"></ul></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>
<div id="jstree">
</div>
<script>
$(function() {
$.ajax({
async : true,
type : "GET",
url : "/treeTest2",
dataType : "json",
success : function(json) {
// alert(JSON.stringify((json)));
createJSTrees(json);
},
error : function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
function createJSTrees(jsonData) {
$("#jstree").jstree({
"json_data" : {
"data" : jsonData
},
"plugins" : [ "themes", "json_data", "ui" ]
}).bind("select_node.jstree", function (e, data) {
alert(e);
});
}
</script>
</body>
</html>
Heres what the alert(JSON.stringify((json))); returns
[
{
"a_attr": {
"id": 1
},
"text": "lvl1",
"icon": "snipplet",
"metadata": null,
"children": [
{
"a_attr": {
"id": 3
},
"text": "lvl2",
"icon": "snipplet",
"metadata": null,
"children": [
{
"a_attr": {
"id": 5
},
"text": "lvl3",
"icon": "snipplet",
"metadata": null,
"children": []
}
]
},
{
"a_attr": {
"id": 4
},
"text": "lvl2",
"icon": "snipplet",
"metadata": null,
"children": []
}
]
},
{
"a_attr": {
"id": 2
},
"text": "lvl1",
"icon": "snipplet",
"metadata": null,
"children": []
}
]
The metadata tag is needed for data that will be needed later. Everything will be otganised into folders and snipplets. And the id tag will be used in hyperlinks.
I believe id="jstree" conflicts with the global variable jstree.
Indeed, If you give an ID to an element, this element is directly available in JS, without doing anything :
myGreatDiv.innerHTML = "It works"
<div id="myGreatDiv"></div>
So, you include the JsTree library, which defines window.jstree.
Then, you create a div with id="jstree", which automatically overwrites window.jstree.
Solution (I guess) : call your div something else, like
<div id="jstree_div">
Here's the solution.
function createJSTrees(jsonData) {
$("#kautkas").jstree({
'core' : {
'data' : jsonData
}
});
}
I have an HTML table which is being populated by a JSON (ajax call). In the Edit and Delete columns of the table I need to have an icon to edit or delete the data on each row.
I don't know how to add the icon when the table is populated by the JSON.
Following is my code:
//JSON which is populating the table. Register.js
$(document).ready(function() {
var allRegister = AjaxCall(apiUrl, mthdGetReleasesFullList, null,
{
});
var data=allRegister.responseText;
alert("testing"+ data);
var jsonResponse = JSON.parse(data);
//var table = $('#contact-data').DataTable({
var table = $('#register-data').DataTable({
"data": jsonResponse.data,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{ "data": "DivisionID" },
{ "data": "StatusID" },
],
"order": [[1, 'dsc']]
});
});
Html code for table:
<link rel="stylesheet" href="entity/Register/css/Register.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page specific JS -->
<script src="entity/Register/js/Register.js"></script>
<div class="container-full">
<div class="heading-1">
<input type="button" id="btn-AddUser" value="Add Release" style="font-size:14px;color:teal;text-align: left">
<h1>
</h1>
<div class="modular-box-text inset">
<div class="retgister-table-holder">
<h2>Pre-Release Access Register:</h2>
<br>
<div class="register-table" >
<table id="register-data"class="display tablesorter" role="grid" aria-describedby="example_info" style="width: 100%;" cellspacing="0">
<thead>
<tr>
<th>ReleaseID</th>
<th>ReleaseName</th>
<th>DivisionID</th>
<th>StatusIDth>
<th>Edit<th>
<th>Delete </th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
You need to work with the render option of the columns objects - documentation here. When you specify the targeted ID of your desired action (i presume it is ReleaseID) you just create more columns with that ID as data object and adjust the column renderer by giving it a custom render method. Since you specified ReleaseID as data, you can re-use that value in the render method as first argument.
In the example below you can see how to achieve this - You can very easily replace Edit and Delete text with <img /> tags referencing the icons you want to have for each action.
// Faking a request
var response = [
{ "ReleaseID": "1",
"ReleaseName": "Release A",
"DivisionID": "10",
"StatusID": "1"
}, {
"ReleaseID": "2",
"ReleaseName": "Release B",
"DivisionID": "9",
"StatusID": "2"
}, {
"ReleaseID": "3",
"ReleaseName": "Release C",
"DivisionID": "9",
"StatusID": "1"
}, {
"ReleaseID": "4",
"ReleaseName": "Release D",
"DivisionID": "10",
"StatusID": "2"
}, {
"ReleaseID": "5",
"ReleaseName": "Release E",
"DivisionID": "11",
"StatusID": "1"
}];
$(document).on('ready', function() {
$('#register-data').dataTable({
"data": response,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{ "data": "DivisionID" },
{ "data": "StatusID" },
{
"data": "ReleaseID",
"render": (data, type, row, meta) => `Edit`
}, {
"data": "ReleaseID",
"render": (data, type, row, meta) => `Delete`
}
],
"order": [[1, 'dsc']]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="register-data"class="display tablesorter" role="grid" aria-describedby="example_info" style="width: 100%;" cellspacing="0">
<thead>
<tr>
<th>ReleaseID</th>
<th>ReleaseName</th>
<th>DivisionID</th>
<th>StatusID</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Thanks for your response.
I used the following to get Edit and Delete buttons to appear on all rows of table
var table = $('#register-data').DataTable({
"data": jsonResponse.data,
"columns": [
{ "data": "ReleaseID" },
{ "data": "ReleaseName" },
{ "data": "DivisionID" },
{ "data": "StatusID" },
{"data":null, "defaultContent": "<button class='btn-Edit'>Edit</button>"},
{"data":null, "defaultContent": "<button class='btn-Delete'>Click!</button>"},
],
"order": [[1, 'dsc']]
});
With the following code I am able to populate a datatable table in below format using ajax request.
$("#example").DataTable({
ajax: {
url: 'test.json',
dataSrc: 'dataset1'
},
"columns": [
{
"data": "name"
},
{
"data": "age"
},
{
"data": "gender"
}]
});
However how could I get the same result with a dataset as the one below?
{
"DataSet2" : {
"-L5_3n2zzOprYrfRRowd" : {
"name" : "John",
"age" : "42",
"gender" : "M"
},
"-L5cf-S1s97ZHdy-0YeN" : {
"name" : "Mathew",
"age" : "39",
"gender" : "M"
}
}
}
UPDATE:
Below an update of what I am trying to get accomplished.
The data is different from the above but the idea is the same.
The below works for with a Json file as the shown below.
What I need however is to work with the same data but then from Firebase.
In firebase however each item has a push-key
The desired outcome should be like below.
enter image description here
HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MK</title>
<!-- DATATABLES -->
<link rel="stylesheet" type="text/css" href="https://www.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<!-- RESPONSIVENESS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<!-- DATETIMEPICKER -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css">
<!-- DATATABLES FREE EDITOR -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css">
<!-- MYCSS -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type='text' id="dateTime" class="dateTime" placeholder="Date Time" readonly>
<div id='tableContainer'>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th><!-- COLUMN FOR RESPONSIVENESS -->
<th>INBOUND</th>
<th>ORG</th>
<th>STA</th>
<th>ETA</th>
<th>OUTBOUND</th>
<th>DES</th>
<th>STD</th>
<th>ETD</th>
<th>REMARKS</th>
<th>GATE</th>
<th>WHS</th>
<th>TEST</th>
<th>ARR</th>
</tr>
</thead>
</table>
</div>
</body>
<!-- FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- DATATABLES -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<!-- RESPONSIVENESS -->
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<!-- DATETIMEPICKER -->
<script src="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<!-- DATATABLES FREE EDITOR -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script src="datatablesAltEditor.js"></script>
<!-- MYJS -->
<script src="libs.js"></script>
JS:
$("#example").DataTable({
select: 'single',
responsive: true,
paging: true,
pageLength: 25,
order: [
[3, 'asc']
],
ajax: {
url: 'dbs.json',
dataSrc: 'dataset1'
},
"columns": [{
"data": null,
defaultContent: '',
className: 'control',
orderable: false
}, // RESPONSIVENESS
{
"data": "inbound"
},
{
"data": "org"
},
{
"data": "sta"
},
{
"data": "eta"
},
{
"data": "outbound"
},
{
"data": "des"
},
{
"data": "std"
},
{
"data": "etd"
},
{
"data": "remarks"
},
{
"data": "gate"
},
{
"data": "whs"
},
{
"data": null,
render: function(data, type, row) {
return data.flight + ' ' + data.org;
}
},
{
data: "arr"
}
]
});
JSON:
{
"dataset1": [{
"inbound": "MK509",
"org": "ICN",
"sta": "12DEC17 16:45",
"eta": "12DEC17 17:35",
"outbound": "MK509",
"des": "ARN",
"std": "12DEC17 18:45",
"etd": "12DEC17 19:35",
"remarks": "DELAYED",
"gate": "S96",
"whs": "T11",
"arr": "X"
}, {
"inbound": "RT8101",
"org": "DOH",
"sta": "12DEC17 08:25",
"eta": "12DEC17 08:25",
"outbound": "RT8101",
"des": "ORD",
"std": "12DEC17 10:25",
"etd": "12DEC17 10:25",
"remarks": "COW CHARTER",
"gate": "S94",
"whs": "T9",
"arr": "X"
}],
"dataset2": [{
"flight": "KIKKER1",
"org": "ICN",
"sta": "12DEC17 16:45",
"eta": "12DEC17 17:35",
"flight": "KE509",
"des": "ARN",
"std": "12DEC17 18:45",
"etd": "12DEC17 19:35",
"remarks": "DELAYED",
"gate": "S96",
"whs": "T11",
"ciss": "X",
"arr": "X"
}, {
"flight": "KIKKER2",
"org": "DOH",
"sta": "12DEC17 08:25",
"eta": "12DEC17 08:25",
"flight": "QR8101",
"des": "ORD",
"std": "12DEC17 10:25",
"etd": "12DEC17 10:25",
"remarks": "COW CHARTER",
"gate": "S94",
"whs": "T9",
"ciss": "X",
"arr": "X"
}]
}
Create an array of columns. Get the child for each object and Loop over it using Object.keys() to get value at key. Finally push the data into columns array
let columns = [];
let data = [];
firebase.db().ref("DataSet2").once("value", function(snap){
snap.forEach(snapshot => {
Object.keys(snapshot.val()).map(k => {
columns.push(Object.assign({}, {"data":k}))
data.push(Object.assign({}, {k:snapshot.val()[k]}))
})
})
})
console.log(columns)
console.log(data)
Now assign the columns and data to DataTable
$("#example").DataTable({
ajax: {
url: 'test.json',
dataSrc: data
},
"columns": columns
});
I am trying for pagination from dynamic data. I started using Datatable but I am not able to load Datatable with JSON Objects.
Please find my code below:
function drawTable(data) {
$('#t01').DataTable( {
ajax: {
"aaData": data,
"dataSrc": ""
},
"aoColumns": [
{ "mdata": "UserName" },
{ "mdata": "AppName" },
{ "mdata": "OS" },
{ "mdata": "Changes" },
{ "mdata": "Time" }
]
} );
}
My JSON:
[{
"UserName": "testUser",
"AppName": "mtv_app",
"OS": "android",
"Changes": "tveEnabled : true to false, ",
"Time": "2016-03-22 11:36:09"
}, {
"UserName": "testUser",
"AppName": "mtv_app",
"OS": "android",
"Changes": "tveEnabled : false to true, ",
"Time": "2016-03-22 11:44:11"
},..
My html page:
<table id="t01" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>UserName</th>
<th>AppName</th>
<th>OS</th>
<th>Changes</th>
<th>Time</th>
</tr>
</thead>
</table>
The table is not getting loaded but loading ... appears in table. I have checked, JSON is in correct format.
I edited my code:
function drawTable(data) {
console.log(data);
$('#t01').DataTable( {
"processing" : true,
"data": data,
"columns": [
{ "data": "UserName" },
{ "data": "AppName" },
{ "data": "OS" },
{ "data": "Changes" },
{ "data": "Time" }
]
} );
}
and now my table is loaded with blank columns and I am getting error as:
DataTables warning: table id=t01 - Requested unknown parameter 'UserName' for row 0, column 0.
Your code work fine for me. This is how I used it :
first : I create a json.php who contains the following code :
[{
"UserName": "testUser",
"AppName": "mtv_app",
"OS": "android",
"Changes": "tveEnabled : true to false, ",
"Time": "2016-03-22 11:36:09"
}, {
"UserName": "testUser",
"AppName": "mtv_app",
"OS": "android",
"Changes": "tveEnabled : false to true, ",
"Time": "2016-03-22 11:44:11"
}]
After I create an other page test.php with these following codes :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://www.datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="t01" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>UserName</th>
<th>AppName</th>
<th>OS</th>
<th>Changes</th>
<th>Time</th>
</tr>
</thead>
</table>
</body>
<script type="text/javascript">
function drawTable(data) {
console.log(data);
$('#t01').DataTable( {
"processing" : true,
"data": data,
"columns": [
{ "data": "UserName" },
{ "data": "AppName" },
{ "data": "OS" },
{ "data": "Changes" },
{ "data": "Time" }
]
} );
}
$(document).ready(function() {
$.ajax({
url: "json.php",
dataType: "json",
success: function(data) {
drawTable(data);
}
});
});
</script>
</html>
And this is the result :
try this, i think this useful
function drawTable(data) {
console.log(data);
$('#t01').DataTable( {
"bProcessing": true,
"bServerSide": true,
"bFilter" : false,
"sAjaxSource": "data.php",//your data source
"columns": [
{ "data": "UserName" },
{ "data": "AppName" },
{ "data": "OS" },
{ "data": "Changes" },
{ "data": "Time" }
]
} );
}
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