Angular Ionic Parsing/Displaying Data based from another Data

Question

I'm trying to display a data (Date) that is based to another data (Order status).

This is the current output which is wrong because it displays all the dates on each order. The certain date must be only printed on each order not all.

Here is my .ts code

constructor(private dataService: DataService, private http: HttpClient) {
  this.data = '';
  this.error = '';
 }

public statuses = [];
public dates = [];

private prepareDataRequest(): Observable<any> {  // <-- change return type here
  // Define the data URL
  const dataUrl = '';
  // Prepare the request
  return this.http.get(dataUrl);
}

ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Set the data to display in the template
      this.statuses = data.output.Result.partsOrderTrackingListSequence
        .map(item => {
          if (item.status && item.status !== '') {
            return item.status;
          } else {
            return '-';
          }
        });
        this.dates = data.output.Result.partsOrderTrackingListSequence
        .map(item => {

          if (item.date && item.date !== '') {
            return item.date;
          } else {
            return '-';
          }
        });
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

My page.html code

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let status of statuses let status of dates">
      {{ status }} - {{dates}}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style="color: red;">{{error}}</span>
    </p>
  </ng-template>

Apologies I'm new in Angular and Typescript and I'm trying to browse and search to the guides available but no luck. If you can give me any good tutorials/guide links about parsing and displaying JSON data to Angular Ionic pages and also for changing the display format for the date. It will be very much appreciated.

Can you please create a stackblitz instance ? Or Either add the data returned by the API's? — Jasdeep Singh
– Jasdeep Singh, Commented Apr 6, 2020 at 14:20

Neha Shah · Accepted Answer · 2020-04-06 09:22:00Z

2

you need to modify your ionViewWillEnter() function

OrderList= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.OrderList = data.output.Result.partsOrderTrackingListSequence


    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

Then in HTML

<ng-container *ngIf=""!error; else errorContent"">
    <p *ngFor=""let order of OrderList;"">
      {{ order.status }} - {{order.dates}}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style=""color: red;"">{{error}}</span>
    </p>
  </ng-template>

edited Apr 6, 2020 at 9:22

answered Apr 2, 2020 at 5:10

Neha Shah

1,2971 gold badge9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Neha Shah Over a year ago

Pls. check now i have updated my answer there is small bracket error.

Vista Over a year ago

Hi, is there any way to add ApiKey? because I'm using my API link under the Data url and it requires api key to access

Neha Shah Over a year ago

What kind of key ? Does it like token to http call with your network call ?

Vista Over a year ago

Its a key so that I can access the API but its okay now I just replaced prepareDataRequest() method to my GetRemoteData() which I used at first to test the connection in console logs. Thanks! :)

Vista Over a year ago

How to display the specific value of my order status? {{order?.status == ORDER PROCESSED}} is this the correct format?

Jasdeep Singh · Accepted Answer · 2020-04-06 14:28:48Z

Extract the values from the observable in a single array-like structure instead of separate arrays. Use this array in the template for data binding with valid values.

Template file:

// Array which will have the values of orders.
orders= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.orders = data.output.Result.partsOrderTrackingListSequence;
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

Template file

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let order of orders">
      {{ order?.status || '-' }} - {{order?.date || '' }}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style="color: red;">{{error}}</span>
    </p>
  </ng-template>

Collectives™ on Stack Overflow

Angular Ionic Parsing/Displaying Data based from another Data

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related