Transform Observable RxJS into practical results

In a straightforward scenario, I have an upload action on the page that looks like this:

onUpload$: Subject<SomeUpload> = new Subject<SomeUpload>();
uploadAction$: Observable<Action> = this.onUpload$.map(entity => this.someActionService.upload(entity));

This uploadAction$ is subscribed to in an Angular2 component based on state.

this.subscription = Observable.merge(
  this.uploadAction$
).subscribe(this.store);

The action sends a base64 image to the server and receives a URL in response. This URL can be obtained like this:

someResponseUrl$: Observable<String> = this.store.let(getSomeUrlFromState());

I need to create a callback functionality as the URL is not used in templates, but rather for manipulating data in the code. Can someone provide guidance on how to create an action from this observable string to retrieve data and make a callback with it? Thank you in advance!

P.S. I've attempted something like this:

uploadAction$: Observable<Action> = this.onUpload$.map(entity => 
  this.someActionService.upload(entity))
    .do(() => {
      const subscription = 
        this.store.let(getSomeUrlFromState()).subscribe(url => {
        console.log(url)
      });
    });

It works, but I feel there might be a better solution...

Answer №1

To achieve your desired outcome and receive the expected results from the subscribers to this.someActionService, you can consider implementing the following logic:

uploadAction$: Observable<Action> = this.onUpload$
  .map(entity => this.someActionService.upload(entity))
  .mergeMap(() => this.store.let(getSomeUrlFromState()))
  .do(url => console.log(url));

Depending on your specific requirements, you may opt to utilize concatMap instead of mergeMap.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in ReactJS: TypeError - Trying to convert undefined or null as an object

Here is the affected code with Typescript errors in local. The component name is correct: {template.elements.map((element: TemplateElementModel, i) => { const stand = roomStands?.find( (stand: ExhibitorModel) => stand.standN ...

Having Trouble with Ionic 2's Loading Controller

In my attempt to utilize the recently added LoadingController in this scenario: let loading=this.load.create({ content: "Connexion au serveur Migal en cours..." }); loading.present(); this.http.get(this.urlCheckerForm.value.migalUrl+'/action/Mobi ...

An error in TypeScript has occurred, stating that the type 'IterableIterator<any>' is neither an array type nor a string type

Hey there! I'm currently working on an Angular project and encountering an error in my VS Code. I'm a bit stuck on how to fix it. Type 'IterableIterator<any>' is not an array type or a string type. Use compiler option '- ...

Converting an Array of Objects into a single Object in React: A Tutorial

AccessData fetching information from the database using graphql { id: '', name: '', regions: [ { id: '', name: '', districts: [ { id: '', ...

Playing around with TypeScript + lambda expressions + lambda tiers (AWS)

Having trouble importing modules for jest tests in a setup involving lambdas, lambda layers, and tests. Here is the file structure: backend/ ├─ jest.config.js ├─ package.json ├─ babel.config.js ├─ layers/ │ ├─ tsconfig.json │ ├ ...

Exploring the generalization of class member initialization in TypeScript

I am looking to make some modifications to the Blog constructor provided in the "Minimal working example" linked below. The objective is to refactor it using pseudo-code by leveraging a generic ModelHelper class to initialize the members of the "Blog" clas ...

Using Angular, implementing conditional statements within a for loop

I am currently working on a project where I have an array being looped inside a tag, using the target="_blank" attribute. The issue is that one of the elements in the array should not have this target="_blank" attribute. What would be the best course of ...

Strategies for Maintaining User Logins

As I test an Ionic2 application on my Android phone, I am faced with the challenge of maintaining user login within the app. The issue is that each time I close the app, I am prompted to log in again. Is there a way for users to stay logged in until they ...

Issue with jQuery click event not activating on initial click but functioning properly on the subsequent click

I am currently implementing the jquery.ime editor in my project, which allows for multi-language editing capabilities. The library I am using can be found here. By default, the language JSON files are loaded on "change" events. However, I would like this f ...

Encountering an unexpected token error while trying to compile a Typescript file to Javascript, even though it had previously worked

In my Typescript project, I usually run it using "ts-node". $ ts-node .\src\index.ts it works =) However, I wanted to compile it to Javascript, so I tried the following: $ tsc $ node .\src\index.js Unfortunately, I encountered the f ...

Angular 2 Routing 3.0: Paying Attention to Letter Case

let routesList: Routes = [ { path: 'x', component: xComponent }, { path: 'y', component: yComponent }, { path: 'zComponent', component: zComponent } ]; When entering "x" in the URL, it navigates to the component page. Ho ...

Chaining asynchronous HTTP requests in Angular 2: A guide to stopping execution if one request fails

I am faced with a challenge of executing an array of HTTP requests in a specific order, where if any request fails, the subsequent ones should not be executed. Is there a way to achieve this requirement? What would be the recommended approach to hand ...

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...

How to initiate animation in Angular2 from a parent component

I am currently working on implementing an animation for a hidden element within a child component. The goal is to have the animation play when the element is displayed, as well as whenever a user clicks on a button in the parent component. Below is the si ...

Offering a limited selection of generic type options in TypeScript

Is there a shorthand in TypeScript for specifying only some optional types for generic types? For example, let's say I have a class with optional types: class GenericClass<A extends Type1 = Type1, B extends Type2 = Type2, C extends Type3 = Type3> ...

The term 'Employee' is typically used as a classification, but in this context, it is being treated as a specific value

I am encountering an issue while trying to define a variable as type Employee. The error message 'Employee' only refers to a type but is being used as a value here. ts(2693) keeps appearing. Here is my show-api.ts code: import { Component, OnIni ...

"Dealing with cross-origin resource sharing issue in a Node.js project using TypeScript with Apollo server

I am encountering issues with CORS in my application. Could it be a misconfiguration on my server side? I am attempting to create a user in my PostgreSQL database through the frontend. I have set up a tsx component that serves as a form. However, when I tr ...

Angular throws an error when trying to parse undefined data outside of an async function

I'm having trouble parsing data retrieved from an http call and passing it to ngOnInit. Can you assist me in finding a solution? My project is built with Angular 4. Here's the async function: async getAsyncData() { this.asyncResult = awai ...

What is the correct way to specify an image path for a background URL?

Currently, I am setting a background image for the hr tag using the following code: <hr style="height:6px;background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;border: 0;margin:0px!important"> However, I have now saved th ...

Refreshing the Angular2 view upon asynchronous model changes

Looking at my Angular2 component, I see that it has a dependency on a datastore. In the template, there are some data bindings connected to that store, like "{{datastore.weather.curTemp}}". The datastore receives updates periodically through http requests. ...