Consuming JSON data

Question

To whom it might concern!Dear Syncfusion Team!Looking for your advice with consuming JSON (which are produced by DjangoRestFramework) in listView controller. The application rises (compiled via webpack) the following error:[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (ej2-lists.es5.js.map, line 0)[Error] Failed to load resource: Request header field Access-Control-Allow-Credentials is not allowed by Access-Control-Allow-Headers. (127.0.0.1, line 0)[Error] XMLHttpRequest cannot load http://127.0.0.1:8000/. Request header field Access-Control-Allow-Credentials is not allowed by Access-Control-Allow-Headers.[Error] Unhandled Promise Rejection: [object Object]  I double checked and ensured that JSON is available (got an access via plain JS request)I cannot get the source of issue. looking forward to hear you soon The code is attached index.html....            ??????:            listview.tsimport { ListView } from '@syncfusion/ej2-lists';import { enableRipple } from '@syncfusion/ej2-base';enableRipple(true);import { DataManager, Query, JsonAdaptor } from '@syncfusion/ej2-data';let remoteListObj: ListView = new ListView({    dataSource: new DataManager({        url: 'http://127.0.0.1:8000/',        adaptor: new JsonAdaptor,        crossDomain: true,                  headers: [        {"Access-Control-Allow-Origin": "*"},        {"Access-Control-Allow-Credentials": "true"},        {"Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT"},        {"Access-Control-Allow-Headers": "Access-Control-Allow-Headers," +                                         "Origin,Accept, " +                                         "X-Requested-With," +                                         "Content-Type," +                                         "Access-Control-Request-Method, " +                                         "Access-Control-Request-Headers"}]    }),    query: new Query().from('entity/').select('id, entityCaption'),    fields: {id:'id', text: 'entityCaption'},    headerTitle: '??????',    showHeader: true});remoteListObj.appendTo('#flat-list');package.json {  "name": "ej2-typescript-seed",  "version": "0.0.1",  "description": "ej2 typescript seed project",  "author": "Syncfusion Inc.",  "license": "SEE LICENSE IN license",  "repository": {    "type": "git",    "url": "https://github.com/syncfusion/ej2-typescript-seed.git"  },  "dependencies": {    "@syncfusion/ej2": "*",    "@syncfusion/ej2-grids": "*",    "@syncfusion/ej2-base": "*",    "@syncfusion/ej2-buttons": "*",    "@syncfusion/ej2-splitbuttons": "*",    "@syncfusion/ej2-calendars": "*",    "@syncfusion/ej2-charts": "*",    "@syncfusion/ej2-maps": "*",    "@syncfusion/ej2-circulargauge": "*",    "@syncfusion/ej2-lineargauge": "*",    "@syncfusion/ej2-data": "*",    "@syncfusion/ej2-dropdowns": "*",    "@syncfusion/ej2-inputs": "*",    "@syncfusion/ej2-lists": "*",    "@syncfusion/ej2-navigations": "*",    "@syncfusion/ej2-popups": "*",    "@syncfusion/ej2-excel-export": "*",    "@syncfusion/ej2-pdf-export": "*",    "@syncfusion/ej2-compression": "*",    "@syncfusion/ej2-file-utils": "*",    "@syncfusion/ej2-schedule": "*"  },  "devDependencies": {    "browser-sync": "^2.18.12",    "gulp": "^3.9.1",    "gulp-protractor": "^4.1.0",    "jasmine": "^2.6.0",    "ts-loader": "^2.1.0",    "typescript": "2.3.4",    "webpack": "2.5.1",    "webpack-stream": "^3.2.0"  },  "scripts": {    "start": "gulp start",    "serve": "gulp e2e-serve",    "test": "gulp e2e-test",    "update-webdriver": "gulp e2e-webdriver-update"  }}index.html screenshot is attachedsetting.pyused package ottoyiu/django-cors-headersCORS_ORIGIN_ALLOW_ALL = True # allowed IP to make requestCORS_ALLOW_CREDENTIALS = TrueCORS_ALLOW_METHODS = default_methodsCORS_ALLOW_HEADERS = default_headersAttachment: screenshop_ed541e2c.zip

Mohammed Farook J · Answer

Hi James, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your reported issue, this issue occurred due to a CORS preflight request header is not accepted in the data service. We have found in your code ‘Access-Control-Allow-Credentials’ added in your request header but it is not accepted in your data service.  
 
So we suggest to change as your data service can accept Access-Control-Allow-Credentials while sent request. 
 
Also you have used “JSONAdaptor” in your sample to interact with server. You need to select proper remote adaptor to work with remote service.   
 
Please find the reference as follows: 
 
Data-Adaptor: https://ej2.syncfusion.com/16.1.37/documentation/data/adaptors.html?lang=typescript  
 
Preflight: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request 
 
Django allow header: https://github.com/ottoyiu/django-cors-headers/#cors_allow_headers 
 
Regards, 
J Mohammed Farook

james · Answer

Thanks a lot.I will review references that you had provided and adjust the code. I probably will post the right code for fellows. However, I still have a question regarding adaptor type to apply. APIes' that are produced by DjangoRestFramework shall be consumed by UrlAdaptor or JsonAdaptor in EssentialJS? Honestly I still cannot get the difference between them

james · Answer

Dear Mohammed!

Thank you for providing useful links regarding my previous request.

I double checked my settings and figured out that the problem on DataManager side.

In particular, the given below code instead of sending GET request sends POST request to the server on default, that ends up by the following error

[Error] Failed to load resource: the server responded with a status of 400 (Bad Request) (entity, line 0) http://127.0.0.1:8000/entity/

so, I was wondering how and where define request METHOD option???

Looking forward to hear you soon!

import { DataManager, Query, UrlAdaptor } from '@syncfusion/ej2-data';

const SERVICE_URI: string = 'http://127.0.0.1:8000/entity/';

new DataManager({
    url: SERVICE_URI,
    adaptor: new UrlAdaptor,
    headers: [
        {"Authorization": "Token ea53edb70b0d7db7e8afe4e67f1071158705d0fa"},
        {"Content-Type": "application/json; charset=utf-8"},
    ]
}).executeQuery(new Query()).then((e) => {
    console.log(e.data);
});

Mohammed Farook J · Answer

Hi James,  
 
Query 1: APIes' that are produced by DjangoRestFramework shall be consumed by UrlAdaptor or JsonAdaptor in EssentialJS?   
 
The ‘UrlAdaptor’ is required to fetch data from remote service. Please find the below main difference between UrlAdaptor vs JsonAdaptor. 

UrlAdaptor :  


The ‘UrlAdaptor’ required to use fetch data from remote service.
It interacts with server-side for all DataManager Queries and CRUD operations.
 
JsonAdaptor: 
 

JSONAdaptor is used to process JSON data. 
It contains methods to process the given JSON data based on the queries.
 
Please find the documentation for your reference. 
 
Documentation : https://ej2.syncfusion.com/16.1.37/documentation/data/adaptors.html?lang=typescript  
 
Query 2: so, I was wondering how and where define request METHOD option??? 
Looking forward to hear you soon!  
 
By default ‘UrlAdaptor’ sends the ‘POST’ request. So in your case, we have extend the UrlAdaptor(as CustomAdaptor) to modify the ProcessResponse and requestType to GET from POST. Please find the code example for your reference. 
 
we have a your requirement by using CustomAdaptor(for extend UrlAdaptor) . please find the code example for your reference. 
 






import { Query, DataManager, ODataAdaptor, UrlAdaptor } from '@syncfusion/ej2-data'; 
 
//create customAdaptor from UrlAdaptor (extend method and properties) 
class CustomAdaptor extends UrlAdaptor { 
        public processResponse(data: any, ds: any, query: any, xhr: any, request: any, changes: any): Object { 
        
            request.data = '{}'; 
            //calling base class processResponse function 
            let original: any = super.processResponse.apply(this, arguments); 
            return original; 
        } 
    }    
 
let adaptor: any = new CustomAdaptor(); 
    adaptor.options.requestType = null; //overwrite the default requestType to GET from POST 
    CustomAdaptor.prototype.convertToQueryString = ODataAdaptor.prototype.convertToQueryString; 
 
    let db: any = new DataManager({ 
        url: 'Home/dataSource', 
        adaptor: adaptor//assign the custom adaptor 
    }) 


Regards, 
J Mohammed Farook