Merge objects in Angular 2

Question

Im having trouble merging 3 objects array. My objective is to merge 3 arrays to one and send HTTP POST to the server.

I have tried using concat but Im getting this error:

EXCEPTION: Error in ./PreviewEmailPage class PreviewEmailPage_Host - inline template:0:0 caused by: Cannot read property 'concat' of undefined

These are my codes:

import { Component } from '@angular/core';
import { NavParams, NavController, LoadingController } from 'ionic-angular';
import { Validators, FormGroup, FormControl } from '@angular/forms';

import { Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';


@Component({
  selector: 'preview-email-page',
  templateUrl: 'preview-email.html',
})
export class PreviewEmailPage {
  headers: Headers;
  loading: any;
  url: string;
  preview: any[];

  FirstArray: any[];
  SecondArray: any[];
  ThirdArray: any[];
  PostData: any[];

  constructor(
    public nav: NavController,
    public navParams: NavParams,
    public loadingCtrl: LoadingController,
    public localStorage: Storage,
    public http: Http,
  ) {
    this.localStorage.get('FirstArray').then((value) => {
      this.FirstArray= value;
    })
    this.localStorage.get('SecondArray').then((value) => {
      this.SecondArray= value;
    })
    this.localStorage.get('ThirdArray').then((value) => {
      this.ThirdArray= value;
    })

    this.PostData = this.FirstArray.concat(this.SecondArray);
    this.PostData = this.PostData.concat(this.ThirdArray);

    this.loading = this.loadingCtrl.create();
  }

  ionViewWillEnter(){
    this.headers = new Headers();
    this.headers.append("Content-Type", "application/x-www-form-urlencoded");
    console.log(this.PostData);
    this.getPreview();
  }

  getPreview(){
    this.loading.present();
    this.url = 'https://domain.com/REST/getpreview.php';
    this.http.post(this.url, this.PostData, {headers: this.headers}).map(res => res.json()).subscribe(res => {
      console.log(res);
      this.preview = res;
    }, err => {
      console.log('error');
    })
  }

}

As suggested by `.get(...).then(...)` your fetching from local storage is happening **asynchronously**. Therefore by the time you get to the concatenation, those fields have not yet been set. — jonrsharpe, Jan 20 '17 at 09:56

score 1 · Answer 1 · answered Jan 20 '17 at 09:56

1

Since this.localStorage.get is an async operation your this.FirstArray is not defined untill the then is executed.

What you can do is run them all in parallel with Promise.all:

Promise.all([this.localStorage.get('FirstArray'), this.localStorage.get('SecondArray'), this.localStorage.get('ThirdArray')]).then(values => { 
  this.FirstArray= values[0];
  this.SecondArray= values[1];
  this.ThirdArray= values[2];
  this.PostData = this.FirstArray.concat(this.SecondArray);
  this.PostData = this.PostData.concat(this.ThirdArray);
});

answered Jan 20 '17 at 09:56

eko

39,722
10
72
98

Thanks for the answer but there's this error now : EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'concat' of undefined – Redzwan Latif Jan 23 '17 at 04:26
@RedzwanLatif Is your callback returning the desired values? console.log them inside the callback to see what they return. – eko Jan 23 '17 at 05:15

Merge objects in Angular 2

1 Answers1