Angular Component fails to Parse API Results

Stimulsoft Ultimate discussion
Post Reply
jwcurnalia
Posts: 2
Joined: Wed Sep 23, 2020 3:40 pm

Angular Component fails to Parse API Results

Post by jwcurnalia »

As a first step to implementing the new Angular component in our application I set up a simple test API to get an idea of how everything would hang together. I used the example code from the Get Started page as a base.

When the component received the output from the API it failed to parse as it was expecting a completely different structure. I was able to get it to work but had to actually rewrite the parsing code:

Original Code:

Code: Select all

        ControllerService.prototype.loadViewer = function () {
            var _this = this;
            var url = this.model.requestUrl.replace('{action}', this.model.action);
            this.httpClient.post(url, this.model.createPostParameters({ action: 'AngularViewerData' }, true, false), 'json').subscribe(function (data) {
                _this.model.clear();
                _this.stylesService.setupStyle(atob(data['styles']), 'viewer');
                _this.model.options = data;
                _this.checkTrExp();
                _this.initAutoUpdateCache();
                _this.subject.next({ action: 'viewer_loaded' });
                _this.getReport();
            });
        };
Modified Code:

Code: Select all

    ControllerService.prototype.loadViewer = function () {
        var _this = this;
        var url = this.model.requestUrl.replace('{action}', this.model.action);
        this.httpClient.post(url, this.model.createPostParameters({ action: 'AngularViewerData' }, true, false), 'json').subscribe(function (data) {
            _this.model.clear();
            var dataObject = JSON.parse(atob(data['Data']));
            var styles = dataObject['styles'];
            _this.stylesService.setupStyle(atob(styles), 'viewer');
            _this.model.options = dataObject;
            _this.checkTrExp();
            _this.initAutoUpdateCache();
            _this.subject.next({ action: 'viewer_loaded' });
            _this.getReport();
        });
    };
It looks like the expected format was a Data object base64 string for the 'styles' property. Instead I got an object where the entire Data object was a base64 string within a 'Data' property which then had a base64 string for the 'styles' property. Is there a different API source which should be used or is there an issue with the component itself?
Lech Kulikowski
Posts: 6198
Joined: Tue Mar 20, 2018 5:34 am

Re: Angular Component fails to Parse API Results

Post by Lech Kulikowski »

Hello,

Please check samples at the following links:
https://github.com/stimulsoft/Samples-JS
https://github.com/stimulsoft/Samples-Angular

Thank you.
jwcurnalia
Posts: 2
Joined: Wed Sep 23, 2020 3:40 pm

Re: Angular Component fails to Parse API Results

Post by jwcurnalia »

Sorry it took so long to respond I wanted to ensure that I was using code like what was indicated in the samples.

API:

Code: Select all

using Motivity.Reports;
using Stimulsoft.Report.Angular;
using System.Web.Mvc;

namespace Movation.Api.Controllers {
    public class PdfTestController : MovationAPIcontrollerBase {
        [HttpPost, ActionName("initviewer")]
        public ActionResult InitViewer() {
            var requestParams = StiAngularViewer.GetRequestParams();

            var options = new StiAngularViewerOptions();
            options.Actions.GetReport = "GetReport";
            options.Actions.ViewerEvent = "ViewerEvent";
            options.Appearance.ScrollbarsMode = true;

            return StiAngularViewer.ViewerDataResult(requestParams, options);
        }

        [HttpPost, ActionName("getreport")]
        public ActionResult GetReport(int id =137) {
            // retrieves a specific report (StiReport) by ID
            var report = ReportPdfHelper.GetReport(id);

            return StiAngularViewer.GetReportResult(report);
        }

        [HttpPost, ActionName("viewerevent")]
        public ActionResult ViewerEvent() {
            return StiAngularViewer.ViewerEventResult();
        }
    }
}
Component:

Code: Select all

<stimulsoft-viewer-angular
  [requestUrl]="'https://localhost/api/pdftest/137/{action}'"
  [action]="'initviewer'"
  [height]="'600px'"
>
Result:

ERROR DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Source of Error:

Code: Select all

ControllerService.prototype.loadViewer = function () {
        var _this = this;
        var url = this.model.requestUrl.replace('{action}', this.model.action);
        this.httpClient.post(url, this.model.createPostParameters({ action: 'AngularViewerData' }, true, false), 'json').subscribe(function (data) {
            _this.model.clear();
            _this.stylesService.setupStyle(atob(data['styles']), 'viewer');
            _this.model.options = data;
            _this.checkTrExp();
            _this.initAutoUpdateCache();
            _this.subject.next({ action: 'viewer_loaded' });
            _this.getReport();
        });
    };
API Response Object:

Code: Select all

data: Object
   ContentType: "text/plain"
   Data: "eyJwYXBlclNpemVzIjpbIkxldHRlciIsIkxlZ2FsIiwiRXhlY3..."
   EnableBrowserCache: false
   FileName: null
   SaveFileDialog: false
   ShowSaveFileDialog: false
Lech Kulikowski
Posts: 6198
Joined: Tue Mar 20, 2018 5:34 am

Re: Angular Component fails to Parse API Results

Post by Lech Kulikowski »

Hello,

Please send us a sample project that reproduces the issue for analysis.

Thank you.
Post Reply