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>

you should follow another guide. There are many way to fetch data from api. I never saw this one. — parrycima
– parrycima, Commented Mar 30, 2020 at 7:29

Barremian · Accepted Answer · 2020-04-01 06:19:50Z

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>

edited Apr 1, 2020 at 6:19

answered Mar 30, 2020 at 7:47

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

6 Comments

Vista Over a year ago

I'm getting "Property 'output' does not exist on type 'object"

Barremian Over a year ago

I've updated the answer. Please have a look. You could change prepareDataRequest() function's return type from Observable<object> to Observable<any>. It isn't good to presume the return type when we pass no header information. Also good practice is to have the prepareDataRequest() function in a service and inject the service to component where you wish to use it.

Vista Over a year ago

I'm also getting: ')' expected from '};", I' having a hard time debugging it

Barremian Over a year ago

That was my bad. I overlooked to properly close the .map() method. Please see my updated answer.

Barremian Over a year ago

Then could you please include a log at the beginning of the map to check what actually is the value of status property? Please post the output as an image here. I've edited the code.

|

programoholic · Accepted Answer · 2020-03-30 07:46:09Z

0

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>

edited Mar 30, 2020 at 7:46

answered Mar 30, 2020 at 7:40

programoholic

5,2545 gold badges26 silver badges63 bronze badges

Collectives™ on Stack Overflow

Ionic Angular displaying and parsing JSON data from API

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related