CODEWITHSUNDEEP
angulartypescriptionic-framework
Vista
Vista

Reputation: 201

Angular Ionic Parsing/Displaying Data based from another Data

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.

enter image description here

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.

Upvotes: 1

Views: 256

Answers (2)

Jasdeep Singh
Jasdeep Singh

Reputation: 8321

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>

Upvotes: 1

Neha Shah
Neha Shah

Reputation: 1247

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>

Upvotes: 2

Related Questions