Ionic Angular displaying and parsing JSON data from API

Question

I have these sample JSON Data format from our API

{
    "type": "BasicResponse",
    "name": "",
    "serverId": "",
    "requestId": "",
    "output": {
      "Result": {
        "ListSequence": [
          {
            "status": "ORDER PROCESSED",
            "date": "",
            "comment3": "",
            "comment4": "",
            "comment1": "",
            "time": "",
            "comment2": ""
          },
        ],
        "RESULT": "SUCCESS"
      }
    },
    "status": {
      "success": true,
      "returnCode": 0
    }
  }

I want to display the value of all status only (e.g. ORDER PROCESSED), so far it displays like this in my html page. I followed this guide by the way.

Here's my page.ts

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

 private prepareDataRequest(): Observable<object> {
  // 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.data = JSON.stringify(data);
      },
      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}`;
      }
    );
}

Here's my page.html

<p *ngIf="!error;else errorContent">{{ data ? data : '-' }}</p>
  <ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>

Answer 1

JSON.stringify is the opposite of what you actually need here. I assume by 'all status only' you want to display status property from all the elements of ListSequence array. If yes, then all the statuses could directly be extracted to it's own array using .map() and displayed. Try the following

public statuses = [];

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.ListSequence
        .map(item => {
          console.log('item.status: ', item.status);   // <-- log the `status` here
          if (item.status && item.status !== '') {
            return item.status;
          } else {
            return '-';
          }
        });    // <-- add closing bracket here
    },
    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

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

Answer 2

To Loop through All statuses , use *ngFor directive . In Component.html add below code :

<div *ngFor="let result of data?.output?.Result?.ListSequence">
        <p> {{ result.status }} </p>
   </div>

Here is the working example : Working demo

Or, for a cleaner code , declare a variable in component.ts file and assign the ListSequence value to it.

public resultArray :any[] = [];

protected someMethod(){
    ...
   this.resultArray = data.output.Result.ListSequence;
....
}

and then in component.html file you can use the list as below :

<div *ngFor="let result of resultArray">
        <p> {{ result.status }} </p>
   </div>