JSON data from external REST service

[larsmMember]

Hi, I’m currently testing out your Widgets, and has come across an issue, I need some advise.

I’ve been looking at your JSON sample for the datagrid, with a local JSON file as DataSource. If I replace the local JSON-file in the URL with a link to a live REST service with JSON response format, I get nothing in the datagrid.

I guess this is because I’m rendering the datagrid before the data is back, and I will be able to fix this by loading data first, and either locally store it as JSON and then link it, alternatively create an array.

I’m sure there is a more clever way of doing this directly between the url-property on the Grid and the live JSON feed.

Below is some working code, with the local url that works, and the remote one that doesn’t (it works in a browser, with the same JSON)

Thanks
LarsM

……..

$(document).ready(function () {

var url = “json.txt”; //working
var url = “http://myservice/jsontest/service1”; //not working

var source =
{
datatype: “json”,
datafields: [
{ name: ‘Id’ },
{ name: ‘StringValue’ },
],
id: ‘Id’,
url: url
};
$(“#jqxgrid”).jqxGrid(
{
source: source,
sortable:true,
columns: [
{ text: ‘Key’, datafield: ‘Id’, width: 50 },
{ text: ‘Value’, datafield: ‘StringValue’, width: 250 }
]
});
});

[rafiParticipant]

According to me, the problem is that the data is not in the same domain as your web page is and you are trying to make a cross-domain call. For security reasons, modern browsers do not allow access across domains. This means, that both the web page and the JSON file it tries to load, must be located on the same server.

[supportParticipant]

Hi LarsM and rafi,

Basically, after the data is loaded into the Grid, it automatically renders the data records. However, If you are trying to request data from a different domain, the Grid will not be populated with data. This is due to the browser’s same-origin policy. The same-origin policy prevents a script loaded from one domain from getting or manipulating properties of a document from another domain. That is, the domain of the requested URL must be the same as the domain of the current Web page. This means that the browser isolates content from different origins to guard them against manipulation. In order to load JSON data located on another domain, we should use JSONP. Binding using JSONP will be supported in the next version and I will also post a link to an example in this thread when the feature is implemented.

Please feel free to write us, if you have any additional questions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[larsmMember]

Of course – thanks for clarifying.

I did get it to work across domain using JSONP and a local Array (see code below), but it didn’t strike me that the built in method was having this issue.

Looking forward to the new JSONP support…

/LM

$(document).ready(function ()
{
var url = ‘http://my-service/jsontest/service1?callback=?’;
$.getJSON(url, null, function (jsondata)
{
var data = new Array();
for (var i = 0; i < jsondata.length – 1; i++)
{
var row = {};
row["Id"] = jsondata[i].Id;
row["StringValue"] = jsondata[i].StringValue;
data[i] = row;
}

var source =
{
data: data,
datatype: "array"
};

$("#jqxgrid").jqxGrid(
{
source: source,
sortable: true,
columns:
[
{ text: 'Key', datafield: 'Id', width: 50 },
{ text: 'Value', datafield: 'StringValue', width: 250 }
]
});
});
});

[technonagaMember]

Hi Larsm,

I have developed the service code with jqxgrid . Please, Try this code , It will be surely useful to you.

$(document).ready(function () {
//URL to the service
url = “http://192.168.0.10/HTML5Service/loginservice.svc/getContacts”,

//Initializing the source property
source = {
datatype: “json”,
datafields: [
{ name: ‘RespondentId’ },
{ name: ‘ParentRespondentId’ },
{ name: ‘101’ },
{ name: ‘102’},
{ name: ‘1’},
{ name: ‘1780’},
{ name: ‘1780_AnswerID’},
{ name: ‘1945’},
{ name: ‘1945_AnswerID’},
{ name: ‘17892’},
{ name: ‘17891’},
{ name: ‘17890’},
{ name: ‘1777’},
{ name: ‘3207’},
{ name: ‘RecordRights’},
{ name: ‘DeleteMsg’}
]
};

//Getting the source data with ajax GET request
var getValue;
$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: false,
url: ‘http://192.168.0.10/HTML5Service/loginservice.svc/getContacts‘,
data:'{}’,
cache: false,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
alert(data.getContactsResult);
source.localdata = data.getContactsResult;

},
error: function (err) {
alert(‘Error’);
}
});

//Preparing the data for use
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
source: dataAdapter,
width:300,
height:300,
theme: ”,
columns: [
{ text: ‘RespondentId’, datafield: ‘RespondentId’, width: 50 },
{ text: ‘ParentRespondentId’, datafield: ‘ParentRespondentId’, width: 50 },
{ text: ‘Contact Type’, datafield: ‘101’, width: 50 },
{ text: ‘Contact Status’,datafield:’102′, width: 50},
{ text: ‘Address’, datafield:’1′, width:50},
{ text: ‘Email’, datafield:’1780′, width:100},
{ text: ‘EmailAns’, datafield:’1780_AnswerID’, width:100},
{ text: ‘EConty’, datafield:’17891′, width:100},
{ text: ‘EContys’, datafield:’17890′, width:100},
{ text: ‘EFirst’, datafield:’1777′, width:100},
{ text: ‘ELast’, datafield:’3207′, width:100}
]
});

});

Happy Coding !!!

Regards,
Naga

[Author]

Posts