Passing Data between pages from url

Question

I am working on ionic 4 project. My project is getting data json from url using input search . l want passing data when users is click on any items to show them another page for more details . l tried with this code but l get undefined value !

this code is holding search operation

export class FlightsearchPage {
  public search = ''
  public flight : any
  filterItems:any;
  callsign : any;
  constructor(private http: HTTP, public loadingController: LoadingController, private nav : NavController) {

    this.addThemFunction
  }

  keyPressed(event: any) { /
    console.log(event.target.value); 
  this.addThemFunction(event.target.value);
  }

 async addThemFunction(search){

  this.http.get('/web/find?query='+search+'', {}, {})
  .then(data => {

    const parsed = JSON.parse(data.data);
    this.flight = parsed.results;
    this.filterItems= this.flight;
    this.callsign = this.flight.detail.flight

    /// here l am try to pass value callsign to page details /// 

    this.nav.navigateForward(`/flightserachdetails/${this.callsign}`)

    }), err=>{
    }
  }


    }

details search

 <ion-content padding>
      <ion-item>
          <ion-label position="floating">Enter your flight number</ion-label>
          <ion-input [(ngModel)]="search" (keyup)="keyPressed($event)" placeholder="Ex : iaw556"></ion-input>
        </ion-item>

  <ion-item *ngFor="let item of flight"  routerDirection="forward">
      <ion-label>
        <ion-text color="primary">
            <h3 [routerLink]="['/flightserachdetails', id]">{{item.label}}</h3>
          </ion-text>
          <p>{{item.name}}</p>
      </ion-label>
    </ion-item>

</ion-content> 

this code is getting data from code above

export class FlightserachdetailsPage {

  public flight : any
  callsignId = null

  constructor(private http: HTTP, public loadingController: LoadingController, private nav: NavController,private activatedRoute: ActivatedRoute) {


    this.callsignId = this.activatedRoute.snapshot.paramMap.get('id')           





}

for display data from another page above.

<ion-content padding>
   {{callsignId}}
   {{flight.request.fetchBy}}
</ion-content>

json response

{
  "results": [
    {
      "id": "IA107",
      "label": "IA107",
      "detail": {
        "callsign": "IAW107",
        "flight": "IA107", 
       "fetchBy": "IA107"
      },
      "type": "schedule",
    }
  ]
}

l am sorry about mess code. any suggestion or give me another code example, please?

Answer 1

You are querying and navigating at the same time so remove that from addThemFunction(search).

async addThemFunction(search){

    this.http.get('/web/find?query='+search+'', {}, {})
       .then(data => {

          const parsed = JSON.parse(data.data);
          this.flight = parsed.results;
          this.filterItems= this.flight[0];
          this.callsign = this.flight.detail.flight

        }
     }
}

You need to remove navigation from addThemFunction(search) function and create a new one to navigate when the item is clicked.

navigate(id){
    this.nav.navigateForward(`/flightserachdetails/${id}`);
}

And remove routerLink from h3 and call navigate() function when item clicked and pass id in that function.

<ion-item *ngFor="let item of flight"  routerDirection="forward">
  <ion-label>
    <ion-text color="primary">
        <h3 (click)="navigate(item.id)">{{item.label}}</h3>
      </ion-text>
      <p>{{item.name}}</p>
  </ion-label>
</ion-item>

To pass complete object:

`this.router.navigate(['flightserachdetails'], item);

On next page:

constructor(private activatedRoute: ActivatedRoute) {
   this.activatedRoute.queryParams.subscribe(resp => {
       console.log(resp);
   });