How to Handle API data

In my ionic project ,i used a API to get flight details. In that API , it have an object named “airportResources”
and that have 4 values(departureTerminal,arrivalTerminal,departureGate,arrivalGate). But some times the object is not available in api, or the all values not available(that means some times it contain only departureTerminal, or arrivalTerminal or any two or three values ).
My problem is when i try to display this value , it shows error.
How i can handle this issue.
Screen shot of the response included below(in this image the airportResources object has only 2 values)
Capture

ts code:

 get_arrivalflights() {

    var communicationParams = {
      showLoader: true,
      reqUrl: "",
      reqBody: {},
      callBackSuccess: (response) => {
        console.log(response);
        this.objectData = response.flightStatuses;
      
      },
      callBackFailure: (response) => { console.log("failure dude"); console.log(response); }
    };
    this.restservice.makeGetRequest(communicationParams);
  }

Html:
<div class="col" style="font-size: 18px;text-align: center">{{item.airportResources.departureTerminal}}</div>

Api calling in provider:

makeGetRequest(communicationParams: any) {
    
  this.baseUrl = "  the url i want to call ";


    var loader;
    if (communicationParams.showLoader == true) {
      loader = this.loadingController.create({
        content: ""
      });
      loader.present();
    }
    this.http.get(this.baseUrl + communicationParams.reqUrl)
      .map(response => response.json())
      .subscribe(communicationParams.callBackSuccess, function(respone) {
          if (communicationParams.showLoader == true) {
            loader.dismiss()
          }
          communicationParams.callBackFailure(respone);
        },
        () => {
          console.log('Authentication Complete');
          if (communicationParams.showLoader == true) {
            loader.dismiss()
          }
        });
  }

the error msg:
error

A solution could be to use the elvis operator - the ? in item.airportResources

<div class="col" style="font-size: 18px;text-align: center">{{item.airportResources?.departureTerminal}}</div>

But better to populate item.airportResources.departureTerminal for content and if null, populate with empty.

Regards

Tom

3 Likes

tnx for your reply it work perfectly