Utilize API within an array to enable Ionic to display a PDF in a document viewer

Recently diving into the world of Angular and Ionic, I've come across some interesting API data:

[{"ID":"1","Title":"Maritime Safety","File_Name":"9c714531945ee24345f60e2105776e23.pdf","Created":"2018-11-07 17:36:55","Modified":"2018-11-07 17:36:55"}]

I want to integrate this data into my Ionic app using an API call. Here's a snippet of my Ionic app code:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';


@Component({
 templateUrl: 'modal-content.html',
})
export class NavigationDetailsPage {
item;

 constructor(params: NavParams) {
 this.item = params.data.item;
 }
}

@Component({
templateUrl: 'contact.html',
})
export class ContactPage {
 items = [];
 pono: string;
 inventorys: string[];
 errorMessage: string;

 constructor(public nav: NavController, public rest: RestProvider, public 
 navParams: NavParams) {
  this.pono = navParams.get('data');
    this.items = [
    {
      'title': 'Angular',
       'description': 'A powerful Javascript framework for building single 
       page apps. Angular is open source, and maintained by Google.',
      }
    ]
  }

  ionViewDidLoad() {
   this.getInsights();
  }

  getInsights() {
  this.rest.getInsights()
     .subscribe(
       inventorys => this.inventorys = inventorys,
       error =>  this.errorMessage = <any>error);
  }

  openNavDetailsPage(item) {
   this.nav.push(NavigationDetailsPage, { item: item });
 }

}

I'm aiming to populate an array with my API data so that instead of the title being "Angular," it will display the actual document title and the description will contain the respective PDF file names. My ultimate goal is to create a document viewer where users can click on titles to directly open PDF files with a back button for navigation.

Your input would be highly appreciated.

Answer №1

service:

The service section has been hardcoded for now, but it should be replaced once the API starts returning valid responses.

getInSights(){
  return of([{"ID":"1","Title":"Maritime Safety","File_Name":"9c714531945ee24345f60e2105776e23.pdf","Created":"2018-11-07 17:36:55","Modified":"2018-11-07 17:36:55"}]);
}

Component:

getInsights() {
  this.rest.getInsights()
     .subscribe(
       data => {
          this.inventorys = data.map(item=> {
            return {
              title: item.Title,
              description: item. File_Name
           ]);
       },
       error =>  this.errorMessage = <any>error);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

Navigating Dynamically between tabs - A How-to Guide

I am working on a mat-tab Angular app where I need to dynamically generate links and transfer them to a navLinks object. Despite ensuring that the concatenation is correct, it seems like my approach is not working as expected. Here's a glimpse of what ...

Decoding the logic behind the *ngIf directive

Context In my code template, I am iterating over data retrieved from an HTTP response. <div *ngFor="let method of paymentMethods"> Within this loop, I am displaying method?.payment_profile_id Now, I want to display one of two elements based on ...

Error message: `Socket.io-client - Invalid TypeError: Expected a function for socket_io_client_1.default`

I have successfully installed socket.io-client in my Angular 5.2 application, but after trying to connect (which has worked flawlessly in the past), I am encountering a strange error. TypeError: socket_io_client_1.default is not a function at new Auth ...

Changing the function to operate asynchronously

How can I convert the following code into an asynchronous function? It is currently returning referralUrl as undefined: controller async createReferralUrls() { this.referralUrl = await this.referralService.generateReferralUrl(this.userData.referral ...

Having trouble getting Laravel and Angular to filter data by categories?

I am currently developing an ecommerce project using Laravel and Angular. I have products and brands associated with these products. In my function to retrieve the products in Laravel, I have used a nullable parameter like this: public function index($bran ...

Token authentication in Angular 4

I need to retrieve data from a URL after posting the username and password. However, I encounter an error when trying to get the token using the GET method. The error message is: : Response for preflight has invalid HTTP status code 405. @Component({ ...

Is it possible to reduce the number of calls to ngAfterContentChecked() and ngAfterViewChecked() instead of calling them repeatedly?

`ngAfterContentChecked() { console.log("Content has been checked"); } ngAfterViewChecked(){ console.log("View has been checked"); }` I am currently developing an Angular project where I need to execute a set of statements twice on a page - ...

Eliminating empty elements from arrays that are nested inside other arrays

I am facing a challenge with the array structure below: const obj = [ { "description": "PCS ", "children": [ null, { "name": "Son", ...

How Can I Build a Dynamic Field Form Builder in Angular 4?

While working with dynamic JSON data, I needed to create fields dynamically. For instance, if my JSON array contains 3 values, I would generate 3 input checkboxes dynamically as shown below: <ng-template ngFor let-numberOfRow [ngForOf]="numberOfRows"&g ...

Exclude all .js files from subdirectories in SVN

In my typescript project, I am looking to exclude all generated JavaScript files in a specific folder from SVN. Is there a convenient command or method to achieve this for all files within the directory? ...

The React type '{ hasInputs: boolean; bg: string; }' cannot be assigned to the type 'IntrinsicAttributes & boolean'

I recently started learning react and encountered an error while passing a boolean value as a prop to a component. The complete error message is: Type '{ hasInputs: boolean; bg: string; }' is not assignable to type 'IntrinsicAttributes & ...

Steps for downloading Excel or Zip files in Angular 4

Currently, my front end is built using Angular 4 and the back end is developed with Lumen 5.4. The task at hand requires me to export certain data as both an Excel and a zip file. I am utilizing the { saveAs } import from the package 'file-saver/Fil ...

TypeORM - Establishing dual Foreign Keys within a single table that point to the identical Primary Key

Currently, I am working with TypeORM 0.3.10 on a project that uses Postgres. One issue I encountered is while trying to generate and execute a Migration using ts-node-commonjs. The problem arises when two Foreign Keys within the same table are referencing ...

It appears that using dedicated objects such as HttpParams or UrlSearchParams do not seem to work when dealing with Angular 5 and HTTP GET query parameters

I'm facing a perplexing issue that I just can’t seem to figure out. Below is the code snippet making a call to a REST endpoint: this.http.get<AllApplicationType[]>(environment.SUDS_API_SERVICE_URL + environment.SUDS_ALL_APPLICATIONS_URL, this ...

How to integrate ngx-bootstrap Static Modal into a personalized Angular 4 component

I have been trying to utilize the static modal feature from ngx-bootstrap in my Angular 4 project. When I directly include the modal on a web page, it works perfectly fine. However, when I try to include it in a component's templateUrl, it causes the ...

Encountering difficulties importing in Typescript and ts-node node scripts, regardless of configuration or package type

I am facing a challenge with my React Typescript project where multiple files share a similar structure but have differences at certain points. To avoid manually copying and pasting files and making changes, I decided to create a Node script that automates ...

"Learn the steps for accessing the most recent version of a ReactJS application from the server

I have my react app hosted on a Netlify domain. How can I ensure that users who have previously loaded older versions of the app are redirected to the most recent deployed version? ...

Steps for hosting Angular on Firebase:1. Set up a Firebase project

I am having trouble getting my Angular app to display properly on Firebase after deployment. Instead of showing my app, it is displaying the default index.html generated by Firebase. How can I fix this? This is what my firebase.json file looks like: { ...

Utilizing a string as an argument in a function and dynamically assigning it as a key name in object.assign

Within my Angular 5 app written in TypeScript, I have a method in a service that requires two arguments: an event object and a string serving as the key for an object stored in the browser's web storage. This method is responsible for assigning a new ...