2

I've been searching for quite awhile and haven't been able to find anything specific on how to do this. The closest thing I could find was this: How to get the value from ion-select option

I'm trying to figure out how to collect the data selected or entered on a page and put it into an array for http post? .. Would appreciate any examples or direct me to some good documentation.

ionic info:

Cordova CLI: 7.0.1 Ionic Framework Version: 3.5.3 Ionic CLI Version: 2.1.12 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 2.0.2 ios-deploy version: 1.9.1 ios-sim version: 6.0.0 OS: OS X El Capitan Node Version: v4.3.2 Xcode version: Xcode 8.2.1 Build version 8C1002

ob1
  • 21
  • 4

1 Answers1

1

Ok you can try this.

Base on the link . you can try this code

on html 

<ion-item>
    <ion-label>place</ion-label> 
    <ion-select [(ngModel)]="selected">
     <ion-option value="item" *ngFor="let item of options">
      {{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option> 
    </ion-select>
</ion-item>

<div padding>
   <button  ion-button (tap)="addOption()" block>Add Option</button>
   <button  ion-button (tap)="PostSelected()" block> Sync </button>
</div>

then in your page component.

    import { Http, RequestOptions, Headers } from '@angular/http';
    import 'rxjs/Rx'; 

   //first declare your ngModel variable and you post array variable
    selected:any;
    SelectedArray = []; 

    addOption(){
      this.SelectedArray.push(this.selected);
    }

    PostSelected(){

      let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

      let options = new RequestOptions({
      headers: headers,
      method: "POST"
      });

      let bodu = JSON.stringify(this.SelectedArray)

      let result =  this._http.post(link, body, options).timeout(30000);
      result.subscribe(data => {
         console.log('result sucess',data)
      },error=>{
         console.log('result error',data)
      })
    }

UPDATE

addOption(){
      let validate = this.SelectedArray.filter(res=>{
            return res == this.selected;
      });

      // if validate length is 0 the new value of this.selected is currently not found on this.SelectedArray so its ok to be push
      if(validate.length == 0){
        this.SelectedArray.push(his.selected)
      }else{
        //  else do other thing
      } 
    }
Jakegarbo
  • 1,201
  • 10
  • 20
  • When I add ngModel to ion-select I lose my data for some reason. – ob1 Aug 08 '17 at 17:49
  • Initially, the select box works and I can chose an item, but it doesn't display on page anymore. Then the second time I click on select box there is no data. : Also, found others have had same issue, but their solutions aren't working. [link](https://github.com/ionic-team/ionic/issues/8942) – ob1 Aug 08 '17 at 18:00
  • Here is what my html page looks like: ` Environments <{{environment.name}} ` – ob1 Aug 08 '17 at 18:01
  • UPDATE: I found solution to ion-select data issues here: [ionic 2: is not triggering (change) action event](https://github.com/ionic-team/ionic/issues/7807) – ob1 Aug 08 '17 at 19:37
  • Html with updated changes: ` Environments <{{environment.name}} ` – ob1 Aug 08 '17 at 19:38
  • .ts component page `onSelectEnvChange(selectedValue: any) { console.log('Selected', selectedValue); }` This took awhile to figure out. Hopefully, it helps someone else. I'll look at getting the selected data from array later today or tomorrow and let you know how it goes. – ob1 Aug 08 '17 at 19:44
  • I decided to do a quick test now to see how things work. The array gets updated, so this will work, but ONLY if user doesn't change selected items. If they do then the array will have old data included. So, how do we add intelligence to remove previous item onChange? This is what i added to component for test: `onSelectEnvChange(selectedValue: any) { this.selected.push(selectedValue); console.log('Selected', this.selected); }` – ob1 Aug 08 '17 at 20:44
  • Nice ! Ok first thing before we push the item(selected) to our selectedArray . we need to check if the item if its already on our array ,Let me update my answer for this .. – Jakegarbo Aug 09 '17 at 06:42
  • Thanks Jake .. You've helped guide me in the right direction. I found with the above [(ngModel)] implementation that this implements two-way data-binding. So, I tested with this: `onSelectEnvChange(selectedValue: any) { console.log('Selectedv', selectedValue); this.selected = selectedValue; console.log('Selecteda', this.selected); }` .. main point is: this.selected = selectedValue; I'm going to move forward working through using arrays like you noted. – ob1 Aug 10 '17 at 02:33
  • One last note .. I spent a ton of time looking at forms and found they don't work with only . Which is used by everyone in their examples. I have not found anyone that has provided a valid answer for this. Ionic 2 team needs to address this as way too buggy as far as i can tell. going to go the simple route for page setup and use arrays to pull data for post. – ob1 Aug 10 '17 at 02:35