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?

write a service or a method/property in existing service to get the object/item by its id and pass the id of the object/item in url while navigating to the next page and call this service method to get that object by id in the component you are loading on the next page. this is easier I think. — Aravind
– Aravind, Commented Feb 16, 2019 at 21:47

Balaj Khan · Accepted Answer · 2019-02-09 17:06:35Z

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);
   });

edited Feb 9, 2019 at 17:06

answered Feb 8, 2019 at 12:38

Balaj Khan

2,6103 gold badges20 silver badges30 bronze badges

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

13 Comments

Ali Ghassan Over a year ago

he dosnt working becuase l am using Ionic/Angular 4 so l have to use this.nav.navigateForward(/flightserachdetails/${this.flight.detail.flight}` . it is methods of the Angular router

Balaj Khan Over a year ago

I think the issue is that your result is array try this.filterItems= this.flight[0];

Ali Ghassan Over a year ago

when l search for nay query is working fine . but when l click on item l got undefined value in page details

Ali Ghassan Over a year ago

it is same problem

Balaj Khan Over a year ago

Glad it helped :)

|

Collectives™ on Stack Overflow

Passing Data between pages from url

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related