on clicking the name i want display their details in an ionic project

Question

i have an restapi (api url:'http://rayi.in/dms-danish/api/loadUsers/1) which contains an array of objects. from the api i have list the name of person on clicking particular person i have show their details in a modal. i have listed the name from the api but on clicking the particular person it shows details of all users how do i fix it.

Array [ Object, Object, Object ]

Object { id: "84", u_name: "Julie", u_email: "herlev@ide.dk", u_phone_number: "88183640", u_password: "null" }

Object { id: "85", u_name: "Brian", u_email: "glostrup@ide.dk", u_phone_number: "88183730", u_password: "null" }

Object { id: "86", u_name: "Alexande T. Abedi", u_email: "alta@ide.dk", u_phone_number: "88183730", u_password: "null" }

import { VendorModalPage } from './../vendor-modal/vendor-modal';
import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { IonicPage, ViewController, ModalController, NavParams } from 'ionic-angular';



@IonicPage()
@Component({
  selector: 'page-vendors',
  templateUrl: 'vendors.html',
})
export class VendorsPage {

  vendors: any[];

  constructor(public viewCtrl: ViewController,
              public modal: ModalController,
              public navParams: NavParams,
              public http: Http) {
              http.get('http://rayi.in/dms-danish/api/loadUsers/1')
                .subscribe(response => {
                  this.vendors = response.json();
                })
              }

  ionViewDidLoad() {
    console.log('ionViewDidLoad VendorsPage');
  }

  // checkVendor(){}
  openModal() {
    const myModal = this.modal.create(VendorModalPage);
    myModal.present();
  }
}



  
    vendors

import { Http } from '@angular/http';
import { VendorsPage } from './../vendors/vendors';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
 

@IonicPage()
@Component({
  selector: 'page-vendor-modal',
  templateUrl: 'vendor-modal.html',
})
export class VendorModalPage {

  vendors:any[];
  venDetails:any;

  constructor(public viewCtrl: ViewController,
              public navParams: NavParams,
              public http: Http)
              {
                http.get('http://rayi.in/dms-danish/api/loadUsers/1')
                .subscribe(response => {
                this.vendors = response.json();
              
                })
              }

  ionViewDidLoad() {
    console.log('ionViewDidLoad VendorModalPage');
  }

  closeModal() {
    this.viewCtrl.dismiss();
  }

    

}

 

  
    Vendor Details
  
  
    
  





  
    
      Name: {{vendor.u_name}}
      
 
      Id: {{vendor.id}}
      
 
      Email: {{vendor.u_email}}
      
 
      Phone Number: {{vendor.u_phone_number}}

user_4254681 · Answer

In your VendorModalPage, the way you get data is same with VendorsPage. So definitely you will get all data. Just do the simple way, pass your object to NavParams.
In vendors.html:

In VendorsPage:

 openModal(vendor) {
    const myModal = this.modal.create(VendorModalPage, {vendor: vendor});<== Here is the way you pass data
    myModal.present();
 }

In VendorModalPage:

 constructor(public viewCtrl: ViewController,public navParams: NavParams){
    this.venDetails = this.navParams.get('vendor');
   //Now you have venDetails  in your hand. Just use it to show data
 }

on clicking the name i want display their details in an ionic project

1 Answers