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

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");