how to configure datasource and manage error on REST API request

posted on November 7th, 2022

Closed

Eric Malalel asked on November 7, 2022

I use my own secured REST API to get the JSON data used to populate the Flexmonster component.
I develop with Angular and my code works fine except the Flexmonster component raises a message which says my JSON is invalid.
Here is the sample JSON I use for my test:

{"serviceError":null,"learningPlansUsersTrackingData":[{"userId":1,"userName":"elearning","title":"M.","firstName":"admin","lastName":"elearning","email":"eric.malalel@gmail.com","phone":"","site":"59472 NARBONNE VINASSAN SUD","groups":"administrateurs||B / AEC||B / ASS","learningPlanId":48,"learningPlanName":"Comment ça marche ?","mixedMode":true,"estimatedMixedTotalDuration":"23:00:00","estimatedOnlineDuration":"33:32:00","timeSpentOnline":"0:00:00","progressMeasure":0,"rawScore":"0","scaledScore":"","scoreValidated":"","allCoursesValidated":"","status":"1","lastUpdatedOn":1667235277000}]}

I checked my JSON with https://jsonformatter.curiousconcept.com/ and it is correct.

Here is how my report is set in Angular:

 const report = {
dataSource: {
filename: metaLmsApiUrl,
dataRootPath: 'learningPlansUsersTrackingData',
type: 'json',
useStreamLoader: true,
requestHeaders: {
Authorization: GlobalVariablesService.customerName + ':' + this.token.getToken()
}
}
};

Please tell me how to fix this error and also, how can I access the 'serviceError' property sent in the JSON.
I use this property to raise any error which may occur server side.

6 answers

Public

Eric Malalel ⋅ November 7, 2022

Made some progress, no issue if I remove the parameter 'useStreamLoader'.
Why that?
And also still interested in question on how to access the ‘serviceError’ property sent in the JSON.

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ November 9, 2022

Hello, Eric!

Thank you for reaching out to us.

Kindly note that the dataRootPath loads all data to the browser memory at once and has a file size limit of 30Mb.
Therefore, it is designed mostly for small amounts of JSON data, which does not require optimization with the streamLoader option.

We suggest the following approach to achieve the described behavior on larger files:
1. Add the flattened JSON without the serviceError property as a data source:

dataSource: {
   filename: learningPlansUsersTrackingDataURL,
   type: 'json',
   requestHeaders: {
      Authorization: GlobalVariablesService.customerName + ':' + this.token.getToken()
   }
}

2. Create a separate endpoint outside of Flexmonster to retrieve the serviceError property, for example, using Ajax.

Please let us know if the suggested approach would work for your case.

Looking forward to hearing from you.

Regards,
Solomiia

Public

Eric Malalel ⋅ November 9, 2022

I removed the serviceError and returns the data.
When there is an error, data is empty and Flexmonster displays its own default alert, so it's almost acceptable.
I saw there is a way to display customized alerts using https://www.flexmonster.com/api/alert/.
But how can I use this alert function to override the default Flexmonster alert, or even better, how can I intercept the datasource is invalid and display a custom alert with my own design.

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ November 10, 2022

Hello, Eric!

Thank you for your swift response.

Kindly note that the general data loading flow in Flexmonster is the following:

Flexmonster is trying to load the data;
When the data is loaded successfully, the dataloaded event is triggered;
If there are errors, the dataerror event is triggered.

We suggest using the alert() API call combined with dataerror event to add a custom alert pop-up as follows:

flexmonster.on('dataerror', function(e) {
   flexmonster.alert({
      title: "Error Title",
      message: e.error,
      type: "error",
   })
});

We have prepared a JSFiddle sample for visualization: https://jsfiddle.net/flexmonster/ryvqhzug/.
Please note that in this case, dataerror is triggered because we have intentionally omitted the data source file extension for the data.csv file.

You can read more about the dataerror event in our docs: https://www.flexmonster.com/api/dataerror/.

Hope you will find our answer helpful.

Regards,
Solomiia

Public

Eric Malalel ⋅ November 10, 2022

Hello Solomiia, and thanks a lot, it works perfectly.
You can close this ticket.

Public

Solomiia Andrusiv ⋅ Flexmonster ⋅ November 10, 2022

Hello, Eric!

Thank you for your feedback.

We are glad to hear that our suggested approach was helpful.

Feel free to reach out to us in case of any other questions.

Regards,
Solomiia

This question is now closed