Tips on how to retrieve an Observable Array instead of a subscription?

Is there a way to modify this forkJoin function so that it returns an observable array instead of a subscription?

connect(): Observable<any[]> {
this.userId = this.authService.userId;
this.habits$ = this.habitService.fetchAllById(this.userId);
this.status$ = this.statusService.fetchAll();
this.joined$ = forkJoin([
  this.habits$,
  this.status$
]).subscribe(([habits, statuses]) => {
  this.joined = habits.map(habit => ({
    ...statuses.find(t => t.habitId === habit.habitId),
    ...habits
  }));
});
return this.joined$;

}

Currently, my variables are declared as follows:

export class HabitDataSource extends DataSource<any> {

  userId: Pick<User, 'id'>;
  habits$: Observable<Habit[]>;
  status$: Observable<Status[]>;
  joined$: Subscription;
  joined: any[];

However, the connect() method requires an Observable-Array format.

Answer №1

Is there a way to modify this forkJoin so that it returns an observable array instead of a subscription?

forkJoin actually does return an array. The reason you are receiving a Subscription is because you are using .subscribe().

Instead of performing your mapping logic within subscribe, you can utilize the map operator:

connect(): Observable<any[]> {
  this.userId = this.authService.userId;
  this.habits$ = this.habitService.fetchAllById(this.userId);
  this.status$ = this.statusService.fetchAll();
  
  return forkJoin([this.habits$, this.status$]).pipe(
    map(([habits, statuses]) =>
      habits.map(habit => ({
        ...habit,
        status: statuses.find(s => s.habitId === habit.habitId)
      }))
    )
  );
}

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

Retrieve the updated file name from the mini file upload form

I have implemented the Mini AJAX Upload Form from this tutorial to upload files to a server. I made modifications to add a timestamp at the end of the file name. How can I return the updated file name (with the timestamp) back to the client for future refe ...

Using TypeScript with Angular, you can easily include parameters to HTML tags

I have an HTML element that looks like this: eventRender(info){ console.log(info.el); } This is the output I'm seeing: https://i.stack.imgur.com/G0hmw.png Now, I want to include these attributes: tooltip="Vivamus sagittis lacus vel augue ...

When the clearInterval function is invoked - either when the timer is modified or when the rendering is detached from the setInterval it is linked to

As a new React developer, I've come across a problem that has me stuck. Does the setInterval associated with a specific render get cleared automatically? import React, { useState, useEffect, useRef } from "react"; import ReactDOM from ...

The functionality of the Youtube API is compromised when adjusting display settings on mobile devices

I've successfully embedded a YouTube player using the js-api, and it's working perfectly. However, I don't want the player to be visible by default. To achieve this, I placed the player inside a div with 'display:none;' set. When I ...

A guide to generating numerous SVG paths using a JavaScript function

Creating strokes with similar length but different angles of rotations can be achieved efficiently using JavaScript instead of writing redundant lines of code. The following code snippet demonstrates one way to achieve this: function stroke(rot) { var d ...

Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

Here's the scenario: I have a simple question regarding an Angular component. Inside this component, there is a function structured like this: somethingCollection: TypeSomething[] ... public deleteSomething(something: TypeSomething): void { // so ...

Save a CSV file into a list, locate a specific key within the list, and retrieve the fourth value associated with that key

After thorough revision, the question now reads as follows: Take a look at this content in database.csv: barcode,ScQty, Name , Qty ,Code 123456 , 3 ,Rothmans Blue , 40 ,RB44 234567 , 2 ,Rothmans Red , 40 ,RB30 345678 , 2 ,Rothmans Gre ...

Changing JavaScript functions into jQuery functions

Currently, I have this Javascript function that I am interested in converting to jQuery: function confirm() { var http = new XMLHttpRequest(); var url = "index.php?tag=' . $dt . '"; var params = "confirm_ref=' . urlencode(encry ...

data-cy appears in the DOM structure, yet remains unseen

I'm seeking some clarity on how to effectively use Cypress. While writing end-to-end tests, I encountered a failed test due to the element not being visible. A helpful answer I found assisted me in resolving this issue by clicking an element that was ...

Some elements that fit the criteria of 'number | function' are not callable at all

Consider a basic function like this: export const sum = (num?: number) => { const adder = (n: number) => { if (!n) { return num; } num = (num && num + n) || n; return adder; }; return a ...

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

A guide on arranging the JSON array within an AngularJS controller

Can someone assist me with sorting the JSON list provided below in the controller and then displaying it in the view? The orderBy filter only sorts one level, but I need it to sort recursively for all children. Input: R2 -->S4 ------>T5 ------> ...

Replace Vue's mixin function

Is it possible to overwrite one of npm's mixins that is used within a component with a local mixin? I have a component from an npm package located in node_modules/somePackageName/components/footer.vue which uses a mixin from node_modules/somePackageN ...

Using AngularJS Material's mdDialog to show locally stored data in a template

In the controller, the section responsible for spawning mdDialog appears as follows: $scope.removeAttendee = function(item) { console.log(item); $mdDialog.show({ controller: DialogController, templateUrl: 'views/removeMsg.tm ...

Dynamic form in Yii2 developed by wbraganca that displays or hides fields depending on the value of a radio button

I am currently using the wbraganca dynamic form in a popup modal. I need to display and validate fields based on the selection of a radio button. To achieve this, I am calling a JavaScript function in the onchange event. <?= $form->field($model, "[{ ...

Preventing users from inputting the same number more than once

Here are a series of text input fields pertaining to a single question: <input type="text" name="{{ $answer->id }}" value="" style="width:20px; text-align:center" maxlength="1" oninput="this.value=this.value.replace(/[^0-5]/g,'');" /> & ...

Generate a library using Vue CLI from a component and then import it into your project

When using vue-cli to build my lib, I run the following command: "build": "vue-cli-service build --target lib --name myLib ./src/component.vue" After the build, how can I import my component from the dist folder? Importing from path-to-myLib/src/compone ...

Module 'xlsx' cannot be located

I encountered this issue while building with Jenkins on the server, but it works fine on my local machine without any errors: 15:07:39 "", 15:07:39 "", 15:07:39 "ERROR in src/services/excel.service.ts:2:23 - error TS2307: Cannot find module 'xlsx&apos ...

Can a JavaScript callback be transmitted via JSON?

Is there a way to pass a callback function via JSON instead of using a function object? window.onpopstate = function(e) { var state = e.state; switch(state['method']) { case 'updateFields': updateFields(sta ...

The request to upload an image to Cloudinary using AngularJS is being blocked due to the origin http://localhost.com:8000 not being allowed by Access-Control-Allow-Origin

I've been attempting to upload images to Cloudinary through my Angular controller without using any libraries. The POST requests are unsigned, and interestingly, I was successful when I tested it with jQuery on a static HTML page. Here is the code sn ...