"No Data" when try to bind data from JSON. Data Grid [DevExtreme] - json

Question

I have a project that use wcf rest angularJS.
I have already create JSON on
localhost:51458/ServiceRequest.svc/GetAllRequest/
The output looked like this
[{"ASSIGNED_TO":"manager","BODY":"asdasd","CATEGORY":"APP","FILE_NAME":"gambar.jpg","ID":18,"REQUESTER":"user","STATUS":"On Progress","SUBCATEGORY":"BUG FIXING","SUBJECT":"asd","TICKET_NUMBER":"APP_20161014_111_18"},{"ASSIGNED_TO":"manager","BODY":"abc","CATEGORY":"IT","FILE_NAME":"App_Form.docx","ID":19,"REQUESTER":"Trainee 02","STATUS":"Assign","SUBCATEGORY":"REQUEST NEW USER","SUBJECT":"test insert lewat browser","TICKET_NUMBER":"IT_20161017_121_19"},{"ASSIGNED_TO":"tes","BODY":"tes","CATEGORY":"tes","FILE_NAME":"tes","ID":20,"REQUESTER":"tes","STATUS":"Assign","SUBCATEGORY":"tes","SUBJECT":"tes","TICKET_NUMBER":"1231"},{"ASSIGNED_TO":"tes","BODY":"tes","CATEGORY":"tes","FILE_NAME":"asd","ID":22,"REQUESTER":"tes","STATUS":"Assign","SUBCATEGORY":"tes","SUBJECT":"tes","TICKET_NUMBER":"123213"},{"ASSIGNED_TO":"dsfbsd","BODY":"sbfd","CATEGORY":"dvsd","FILE_NAME":"sdfbsdf","ID":38,"REQUESTER":"sdfv","STATUS":"Assign","SUBCATEGORY":"dvdv","SUBJECT":"dvdsv","TICKET_NUMBER":"huih"},{"ASSIGNED_TO":"assignto","BODY":"body","CATEGORY":"category","FILE_NAME":"fileName","ID":40,"REQUESTER":"request","STATUS":"Assign","SUBCATEGORY":"subCategory","SUBJECT":"subject","TICKET_NUMBER":"ABC_1234_98"},{"ASSIGNED_TO":"assignto","BODY":"undefined","CATEGORY":"undefined","FILE_NAME":"fileName","ID":45,"REQUESTER":"request","STATUS":"Assign","SUBCATEGORY":"undefined","SUBJECT":"undefined","TICKET_NUMBER":"[object Object]"}]
I want to bind it to Data Grid on DevExtreme. you can see the code on approval.js
$scope.dataGridOptions = {
dataSource: {
store: {
type: "odata",
url: "http://localhost:51458/ServiceRequest.svc/GetAllRequest"
},
select: [
"ID",
"REQUESTER",
"CATEGORY",
"BODY",
"FILE_NAME",
"ASSIGNED_TO"
],
},
columns: [
{
caption: "ID",
dataField: "ID",
}, {
dataField: "REQUESTER",
width: 250
}, {
caption: "Kategori",
dataField: "CATEGORY",
}, {
caption: "Body",
dataField: "BODY",
}, {
caption: "File Name",
dataField: "FILE_NAME",
}, {
caption: "Assigned To",
dataField: "ASSIGNED_TO",
}
]
}
in the html
<div>
<div id="gridContainer" dx-data-grid="dataGridOptions"></div>
</div>
I'm always getting No Data on the Data Grid. Why it cant get data from localhost? can it use JSON? or the data should be ODATA? because when i try to bind the example data from
https://js.devexpress.com/Demos/DevAV/odata/Products
it can work bind odata example
Thanks in advance

Answer 1

You should try it.
$.getJSON("localhost:51458/ServiceRequest.svc/GetAllRequest/", function (data) {
$("#gridContainer").dxDataGrid({
dataSource: data,
// your code....
}).dxDataGrid("instance");