Obtaining a value from within an Angular 'then' block

Question

Obtaining a value from within an Angular 'then' block

I have a unique issue that I haven't been able to find a solution for on StackOverflow:

Within an Angular 6 service, I am trying to call a function from another service using TypeScript. Here is the code snippet:

Service1:

myArray: Array<IMyInterface>

...

getArray(): Observable<IMyInterface[]> {

    this.myArray= this.service2.getAnArray(1);
    return Observable.of(this.myArray);
}

Service2

getAnArray(myEntityId): Array<IMyInterface> {
  const myArray2: IMyInterface[] = [];

  this.getConnection().then(connection => {
    connection.invoke('GetEntityById', myEntityId).then((someJson: any) => {
      someJson.forEach( x => myArray2.push(x));       
      return myArray2;
    })
  }); 
}

While executing this, I encounter an error in Service2 stating

A function whose declared type is neither 'void' nor 'any' must return a value.

The issue arises because I need to return the populated array myArray2 only after resolving

connection.invoke('GetEntityById', myId)

, which is why I am attempting to do it within the then block.

How can I overcome this challenge?

javascript angular typescript promise

Answer 1

Answer №1

This approach may or may not meet your requirements, however, you have the option to simply return the Promise within your service method like so:

fetchArrayByID(entityID) {
  const myArr: IMyInterface[] = [];

  // Make sure to include the return statement
  return this.getConnection().then(connection => {
    return connection.invoke('GetEntityById', entityID).then((jsonResponse: any) => {
      jsonResponse.forEach( item => myArr.push(item));       
      return myArr;
    })
  }); 
}

Your calling code would then be structured as follows:

fetchArrayByID(someIdentifier).then(function(resultArray) {. . .});

Answer 2

This approach may or may not meet your requirements, however, you have the option to simply return the Promise within your service method like so:

fetchArrayByID(entityID) {
  const myArr: IMyInterface[] = [];

  // Make sure to include the return statement
  return this.getConnection().then(connection => {
    return connection.invoke('GetEntityById', entityID).then((jsonResponse: any) => {
      jsonResponse.forEach( item => myArr.push(item));       
      return myArr;
    })
  }); 
}

Your calling code would then be structured as follows:

fetchArrayByID(someIdentifier).then(function(resultArray) {. . .});

Answer 3

Answer №2

Although it's a bit delayed, this information could still be valuable to someone. Utilizing Async/Await can be beneficial in this scenario. Whenever 'await' is encountered, it pauses the thread until the task is completed.

 async retrieveArrayData(entityId) {
    await this.connect();
    try {
      let result = await connection.invoke('GetEntityById', entityId).then((jsonResponse: any) => {
      jsonResponse.forEach(item => myCollection.push(item));
      return myCollection;
      })
   } catch (error) {
  console.log(error);
}

}

To obtain the results (which will be a promise):

this.retrieveArrayData(entityId).then((data) => {
  console.log('Received data:', data);
 
});

Answer 4

Although it's a bit delayed, this information could still be valuable to someone. Utilizing Async/Await can be beneficial in this scenario. Whenever 'await' is encountered, it pauses the thread until the task is completed.

 async retrieveArrayData(entityId) {
    await this.connect();
    try {
      let result = await connection.invoke('GetEntityById', entityId).then((jsonResponse: any) => {
      jsonResponse.forEach(item => myCollection.push(item));
      return myCollection;
      })
   } catch (error) {
  console.log(error);
}

}

To obtain the results (which will be a promise):

this.retrieveArrayData(entityId).then((data) => {
  console.log('Received data:', data);
 
});

Obtaining a value from within an Angular 'then' block

Answer №1

Answer №2

Similar questions

Incorporate Stripe Elements into your Nuxt Js application

Customize the antd theme in a create-react-app project without the need to eject webpack

Accessing the parent div in an Ajax success function

Attaching this to the event listener in React JS

Having trouble getting tsserver-plugins to function properly in either Atom or VSC

Selenium WebDriver producing unexpected results with getTitle() method

I'm currently attempting to set up the React JS package, but unfortunately encountering some errors in the process

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Resetting the state back to its initial value - which one to use: useState or useReduce?

Relocating to reveal or conceal item

The overflow hidden function does not seem to be fully functional on the iPad

Tips for composing content on a sanitized input?

Commencing a New Ember.js Venture

The Nextjs application folder does not contain the getStaticPaths method

On the hunt for a specialized JavaScript library for input validation?

Troubleshooting difficulties integrating NodeJS with R using an R script

Linked selection options for state, city, and postal code

The NgZone reference error caused the prerendering to fail

Creating dynamic form fields using AngularJS

Load and execute a dynamically created script in JavaScript at the same time