Transfer list item data from one page to another

Question

I am using ionic 2 and am trying to transfer data from one page to another. More specifically one list item on the first page(quickSearch) to another page(quickSearchDetail). I have a picture below to demonstrate this.

When I click on a list it should transfer that data to the next page, however I am having an issue where only the first list item is being transferred irrespective of which item I click (over writing my local storage data).

quickSearch Template list item

<ion-item *ngFor="let item of items" (click)="gotoQuickSearchDetail(item._id)">
  <p id="clusterNameFormValue">{{ item.clusterName }}</p>
  <p id="currentBUNameFormValue">{{ item.currentBUName }}</p>
  <p id="technologyFormValue">{{ item.technology }}</p>
  <p id="customerFormValue">{{ item.Customer }}</p>
  <p id="clusterHeadNumberFormValue">{{ item.clusterHeadNumber }}</p>
</ion-item>

quickSearch.ts

gotoQuickSearchDetail(){
  var clusterName: any = clusterName = document.getElementById("clusterNameFormValue").innerHTML;
  var currentBUName: any = currentBUName = document.getElementById("currentBUNameFormValue").innerHTML;
  var technology: any = technology = document.getElementById("technologyFormValue").innerHTML;
  var customer: any = customer = document.getElementById("customerFormValue").innerHTML;
  var clusterHeadNumber: any = clusterHeadNumber = document.getElementById("clusterHeadNumberFormValue").innerHTML;

  localStorage.setItem('clustername', clusterName);
  localStorage.setItem('currentBUName', currentBUName);
  localStorage.setItem('technology', technology);
  localStorage.setItem('customer', customer);
  localStorage.setItem('clusterHeadNumber', clusterHeadNumber);

  this.navCtrl.setRoot(QuickSearchDetail);
}

quickSearchDetail item

<ion-list>
    <ion-item>
      <p id="clusternameDetail"></p>
      <p id="currentBUNameDetail"></p>
      <p id="technologyDetail"></p>
      <p id="customerDetail"></p>
      <p id="clusterHeadNumberDetail"></p>
   </ion-item>
</ion-list>

quickSearchDetail.ts

ionViewDidLoad() {
    document.getElementById('clusternameDetail').innerHTML = localStorage.getItem('clustername');
    document.getElementById('currentBUNameDetail').innerHTML = localStorage.getItem('currentBUName');
    document.getElementById('technologyDetail').innerHTML = localStorage.getItem('technology');
    document.getElementById('customerDetail').innerHTML = localStorage.getItem('customer');
    document.getElementById('clusterHeadNumberDetail').innerHTML = localStorage.getItem('clusterHeadNumber');
}

Answer 1

This is too much to handle :D but, where you are going wrong is using getElementById , and id.. and.. stuff. an ID is unique. And with the *ngFor you are creating more elements with the same ID, this is not allowed. But the browser copes, and gives back the first element it finds with that ID, which explains the behaviour you are seeing.

Another point is the weird usage of localStorage . This does not seem like a use-case for what you are trying to do. I suggest you look at the angular documentation, and specifically at inter component communication.

In short, you probably should create a service, which holds the array list. Then create a navigation parameter on your detail page which will hold the id number to an item in the array list of the service. On that page you can obtain this id and access the service to get the right data from the items.

I could write it all for you, but this is not the right site for that, which will bring me back to my previous mentioned suggestion. Look at angular documentation, to see how you should create a master-detail structure, because getElementById , innerHtml and localStorage is not the way to go

Answer 2

Try to use this

//quickSearch Template list item 
<ion-item *ngFor="let item of items" (click)="gotoQuickSearchDetail(item)">
  <p id="clusterNameFormValue">{{ item.clusterName }}</p>
  <p id="currentBUNameFormValue">{{ item.currentBUName }}</p>
  <p id="technologyFormValue">{{ item.technology }}</p>
  <p id="customerFormValue">{{ item.Customer }}</p>
  <p id="clusterHeadNumberFormValue">{{ item.clusterHeadNumber }}</p>
</ion-item>


//quickSearch.ts
gotoQuickSearchDetail(item: any){
  var clusterName: any = clusterName = item.currentBUName;
  var currentBUName: any = currentBUName = item.currentBUName;
  var technology: any = technology = item.technology;
  var customer: any = customer = item.Customer;
  var clusterHeadNumber: any = clusterHeadNumber = item.clusterHeadNumber;

  localStorage.setItem('clustername', clusterName);
  localStorage.setItem('currentBUName', currentBUName);
  localStorage.setItem('technology', technology);
  localStorage.setItem('customer', customer);
  localStorage.setItem('clusterHeadNumber', clusterHeadNumber);

  this.navCtrl.setRoot(QuickSearchDetail);

You have loop for items. In that case each items contain same id. For this reason when you try to find a value by element id it always gives you 1st item.

Answer 3

You just need to use navParams . You have a very seriously creative solution but the answer is very simple. For my answer I am going to remove all the ID 's , add them back if you need it for styles. Also one thing to note, try not to approach angular with a jquery mindset, because they are 2 different animals.

quickSearch Template list item

 <ion-item *ngFor="let item of items">
   <p>{{ item.clusterName }}</p>
   <p>{{ item.currentBUName }}</p>
   <p>{{ item.technology }}</p>
   <p>{{ item.Customer }}</p>
   <p>{{ item.clusterHeadNumber }}</p>
</ion-item>

So there is your list wrapper in a *ngFor . Your assignment of item is all you need. That item holds all of the data that you want on the next page. It is your "package" ( if you will ). Now all you want to do is pass the "package" to the next page. And we want the passing to start when it is clicked.

Therefore we pass it on the (click) event.

(click)="gotoQuickSearchDetail(item)"

So now we just need to add the method in our Component file, and then with the power of routing in ionic 2 we just send it to the next page.

gotoQuickSearchDetail(item){
    this.navCtrl.push(QuickSearchDetail, item);  //  Notice the 2nd parameter
}

The 2nd parameter passes the item to the page declared in the 1st parameter. So now you are going to the page QuickSearchDetail and you are passing your "package" item along for the ride.

Now when you get to the next page you need to tell that page .. "Hey i have "package" called item and it has some data .

So in your QuickSearchDetail Component you can add this.

import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: '...',
  templateUrl: '...html'
})
export class QuickSearchDetailPage {

    itemDetails: any;
    constructor(public navCtrl: NavController, public navParams: NavParams){
        this.itemDetails = this.navParams.data;

        // All the data is now held in the itemDetails variable.
        console.log(this.itemDetails);
    }
}

You now have assigned the "package" holding the clicked item 's data to the variable itemDetails which was "passed" (by default ) to the navParams.data . You can now use the itemDetails in your view.

 {{ itemDetails.PROPERTYHERE }}

---

BONUS:

You can get this stuff for free when you use your terminal to generate a page.

>_ ionic generate page QuickSearchDetail

Also the navCtrl has a third property which has options for animation. Which is fun.

this.navCtrl.push(QuickSearchDetail, item, { 
             animate: true, 
             direction: 'forward', 
             mode: 'ios'});

Read more about the navCtrl here
And read more about the navParams here

Answer 4

Add all data to your Click function and in .ts

  gotoQuickSearchDetail(data:any,datab:any.........){

   navpushhere(SearchPage,{firstPassed:data,secondpassed:datab}); }