Promise used for concatanation of array from different arrays

Question

I want to construct an array with the help of 3 other arrays. I am using JS promise for this purpose but not able to get the implementation right. SO what I basically want to do is to populate an array first.

let getPlacePromise = function() {
      return new Promise(function(resolve,reject){
        this.getplaceArray= this.getfilterPlaces(inputdata);
        resolve("got places\n" ); 
      });
  };

  let getTransporterPromise= function(message) {
    return new Promise(function(resolve,reject){
      this.getTransporterArray= this.getfilterTransporter(inputdata);
      resolve(message+"got Transporter"); 
    });
  }; 

  let getVehiclePromise = function(message) {
    return new Promise(function(resolve,reject){
      this.getVehicleArray= this.getfilterVehicles(inputdata);
      resolve(message+"got vehicle"); 
    });
  };

  getPlacePromise().then(function(result){
      return getTransporterPromise(result);
  }).then(function(result){
      return getVehiclePromise(result);
  }).then(function(result){
    this.AllDropdownValues= this.getTransporterArray.concat(this.getVehicleArray);
  });

I know this code should have errors. I am not able to come up with the right implementation. I want getplaceArray to populate first than only the other other arrays should be complete. Is it possible to call function inside promises. The error I was getting here was getplaceArray, getTransporterArray, getVehicleArray are undefined.

getfilterTransporter function:

getfilterTransporter(autocompleteInputData) {

var k= this.checkRegex(autocompleteInputData);
this.getfilteredTransporter= this.filterTransporters(k);
return this.formatTransporterValue(this.getfilteredTransporter);

}

getfilterVehicle :

getfilterVehicles(autocompleteInputData) {

  var k= this.checkRegex(autocompleteInputData);
    this.getfilteredVehicle= this.filterVehicles(k);
    return this.formatVehicleValue(this.getfilteredVehicle);
}

getfilterPlace

getfilterPlaces(autocompleteInputData) {
  if (autocompleteInputData == '' || typeof(autocompleteInputData) == 'object') 
  return null;
  this.placeData.getPlacesFromPig(autocompleteInputData)
  .subscribe(response => {
     return this.formatPigResponse(response);
   }); 

}

Edit :

Modified the answers a bit. Rest are working but this.getfilterPlaces which has a subscribe method running inside it to populate data is not working.

let a=[], b=[],c=[];
    a=  this.getfilterPlaces(inputdata);
    b= this.getfilterTransporter(inputdata);
    c= this.getfilterVehicles(inputdata);

    let getplaceArray = [],
  getTransporterArray = [],
  getVehicleArray = [];

let getPlacePromise = function () {
  const self = this;
  return new Promise(function (resolve, reject) {
    getplaceArray = a;
    resolve("got places\n");
  });
};

let getTransporterPromise = function (message) {
  const self = this;
  return new Promise(function (resolve, reject) {
    getTransporterArray =  b
    resolve(message + "got Transporter");
  });
};

let getVehiclePromise = function (message) {
  const self = this;
  return new Promise(function (resolve, reject) {
    getVehicleArray = c
    resolve(message + "got vehicle");
  });
};

getPlacePromise().then(function (result) {
  return getTransporterPromise(result);
}).then(function (result) {
  return getVehiclePromise(result);
}).then(function (result) {
  var AllDropdownValues = getTransporterArray.concat(getVehicleArray).concat(getplaceArray);
  console.log(AllDropdownValues);
});

The answer is use of async and await.Below is the code.

async function getfilterPlaces(autocompleteInputData) {
  if (autocompleteInputData == '' || typeof(autocompleteInputData) == 'object') 
    return null;
  return this.placeData.getPlacesFromPig(autocompleteInputData)
    .toPromise()
    .then(response => this.formatPigResponse(response));
}

while calling the function filterAllComponent(inputdata) :

async function filterAllComponent(inputdata) {
  let a=[], b=[], c=[];
  a = await this.getfilterPlaces(inputdata);
  b = this.getfilterTransporter(inputdata);
  c = this.getfilterVehicles(inputdata);
[...]

are any of the `this.getfilter*` functions **asynchronous** ? — Jaromanda X, Mar 09 '18 at 07:46
Oh, I see the problem ... `this` inside `return new Promise(function(resolve,reject){` is not the `this` you think `this` is — Jaromanda X, Mar 09 '18 at 07:50
`getplaceArray, getTransporterArray, getVehicleArray` all 3 have different scopes. — Rahul Sharma, Mar 09 '18 at 07:50
I want to populate an array with all other three arrays. But place needs more time to populate than other two. So I want getplaceArray to populate first than only others. — Udit Gogoi, Mar 09 '18 at 07:51
well, even then, the code you posted doesn't wait for anything - I think you've misunderstood promises — Jaromanda X, Mar 09 '18 at 07:52
@JaromandaX if I want the result I am looking for how should I implement it. When I call all 3 functions together than getplaceArray is taking longer so my array concatanation remains incomplete. — Udit Gogoi, Mar 09 '18 at 07:55
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — n00dl3, Mar 09 '18 at 07:55
@UDGogs when you do `this.getVehicleArray` it refers current function this not global this and you have fix `this.getfilterVehicles` also because I can't see any getfilterVehicles function in the same scope. — Rahul Sharma, Mar 09 '18 at 07:55
`how should I implement it` - as far as the asynchronous code goes, *unknown* - because you've not shown `getfilter*` code — Jaromanda X, Mar 09 '18 at 07:57
@UDGogs can you add `getfilterVehicles,getfilterPlaces,getfilterTransporter` function also? — Rahul Sharma, Mar 09 '18 at 07:59
@RahulSharma getfilterVehicles is just returning the data it has extracted from the backend API. — Udit Gogoi, Mar 09 '18 at 08:35
@JaromandaX, I have edited the questions and added the other functions. — Udit Gogoi, Mar 09 '18 at 08:43
@RahulSharma using getfilterPlaces(inputdata); without this. is throwing error. — Udit Gogoi, Mar 09 '18 at 09:13

Rahul Sharma · Answer 1 · 2018-03-09T09:22:52.230

0

try this

let getplaceArray = [],
  getTransporterArray = [],
  getVehicleArray = [];

let getPlacePromise = function () {
  const self = this;
  return new Promise(function (resolve, reject) {
    getplaceArray = self.getfilterPlaces(inputdata);
    resolve("got places\n");
  });
};

let getTransporterPromise = function (message) {
  const self = this;
  return new Promise(function (resolve, reject) {
    getTransporterArray = self.getfilterTransporter(inputdata);
    resolve(message + "got Transporter");
  });
};

let getVehiclePromise = function (message) {
  const self = this;
  return new Promise(function (resolve, reject) {
    getVehicleArray = self.getfilterVehicles(inputdata);
    resolve(message + "got vehicle");
  });
};

getPlacePromise().then(function (result) {
  return getTransporterPromise(result);
}).then(function (result) {
  return getVehiclePromise(result);
}).then(function (result) {
  this.AllDropdownValues = getTransporterArray.concat(getVehicleArray);
});

edited Mar 09 '18 at 09:22

answered Mar 09 '18 at 07:53

Rahul Sharma

9,534
1
15
37

`this is not required` - you assume to know much about the OP's unwritten code! – Jaromanda X Mar 09 '18 at 07:56
@RahulSharma not working. I have modified the function a bit. check my edit. Rest are working but getfilterPlaces is still not coming. I am sharing the exact function respponsible for populating getfilterPlaces. – Udit Gogoi Mar 09 '18 at 09:58
try this `getTransporterArray.concat(getVehicleArray).concat(getplaceArray)` – Rahul Sharma Mar 09 '18 at 10:03
done that. check my edit. the two data is coming but not the getfilterPlaces – Udit Gogoi Mar 09 '18 at 10:24
@UDGogs I think no need of promise because you are not doing anything inside that. – Rahul Sharma Mar 09 '18 at 10:37
@UDGogs are you getting the value of a,b, c? – Rahul Sharma Mar 09 '18 at 12:35
@RahulSharma I have updated the anwer with the solution I got. Have a look. – Udit Gogoi Mar 09 '18 at 17:15

Promise used for concatanation of array from different arrays

1 Answers1