CODEWITHSUNDEEP
javascriptjsonyui
Rony
Rony

Reputation: 463

"No data to display" while populating JSON data into YUI DataTable

I am newbie in YUI, can't find how to fix this issue. I am using code from YUI examples and trying to make it work for my json url..

<div id="pizza" class="yui3-skin-sam dt-example"></div>
<script>
YUI().use("datasource-get", "datasource-jsonschema", "datatable-base-deprecated", "datatable-datasource-deprecated", function (Y) {

var url = "http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo",
dataSource,
table;

dataSource = new Y.DataSource.Get({ source: url });

dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
    resultListLocator: "geonames",
    resultFields: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]
}
});

table = new Y.DataTable.Base({
columnset: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]    });

table.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource });

table.render("#pizza");

table.datasource.load({ request: url });
});
</script>

and my json response is

{"geonames":[{"fcodeName":"capital of a political entity","toponymName":"Mexico City","countrycode":"MX","fcl":"P","fclName":"city, village,...","name":"Mexiko-Stadt","wikipedia":"","lng":-99.12766456604,"fcode":"PPLC","geonameId":3530597,"lat":19.428472427036,"population":12294193}, same pattern....]}

I think I am missing some basic concepts. I apologies if this question makes no sense.

Upvotes: 1

Views: 943

Answers (1)

teddybeard
teddybeard

Reputation: 2014

Here is the Javascript code you need. You can test it using this fiddle: http://jsfiddle.net/tppiotrowski/pfHAm/

YUI().use("datasource-get", "datasource-jsonschema", "datatable-base-deprecated", "datatable-datasource-deprecated", function (Y) {

var url = "http://api.geonames.org/citiesJSON?",
    query = "north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=test1",
    dataSource,
    table;

dataSource = new Y.DataSource.Get({ source: url });

dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
    schema: {
        resultListLocator: "geonames",
        resultFields: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]
    }
});

table = new Y.DataTable.Base({
    columnset: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]    
});

table.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource });

table.render("#pizza");

table.datasource.load({ request: query });
});​

Upvotes: 3

Related Questions