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

<ion-header>

  <ion-navbar>
    <ion-title>vendors</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <button ion-button block (click)="openModal()" *ngFor="let vendor of vendors">  
      <ul>
        <li>
            {{vendor.u_name}}
        </li>
      </ul>
    </button>
  </ion-list>
</ion-content>

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

    

}

 <ion-header>

  <ion-navbar>
    <ion-title>Vendor Details</ion-title>
  </ion-navbar>
  <ion-buttons>
    <button ion-button small color="danger" (click)="closeModal()">&#x274C;</button>
  </ion-buttons>
</ion-header>



<ion-content padding>
  <ul *ngFor="let vendor of vendors; index as i">
    <li *ngIf="">
      Name: {{vendor.u_name}}
      <br> 
      Id: {{vendor.id}}
      <br> 
      Email: {{vendor.u_email}}
      <br> 
      Phone Number: {{vendor.u_phone_number}}
    </li>
  </ul>
</ion-content>

score 0 · Accepted Answer · answered Oct 06 '17 at 11:02

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:

<button ion-button block (click)="openModal(vendor )" *ngFor="let vendor of vendors">

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 Answers1