When chaining observables, the observable value inside the subscribe function may be undefined

I'm dealing with a scenario where I need to pass an Observable returned by a function from a specific library into multiple other function calls. This is how my code structure looks:

extractSignature = (xml, signatureCount = 1) => {
    const observ = this.generateDigest(signedContent, alg).pipe(map(digest => {
            const sigContainer = {
                alg: alg,
                signature: signatureValue,
                signedContent: signedContent,
                digest: digest
            };
            console.log('sigContainer inside pipe: ');
            console.log(sigContainer);
            return sigContainer;
        }));

        return observ;
}

dissasemble(xml): Observable<SignatureContainerModel[]> {
    const observables: Observable<any>[] = [];
        for (let i = 1; i <= count; i++) {
            const extractSigObservable = this.extractSignature(xml, i);

            console.log('extractSigObs inside pipe: ');
            console.log(extractSigObservable);

            const observ = extractSigObservable.pipe(map(sigContainer => {
                console.log('sigContainer inside pipe: ');
                console.log(sigContainer);

                const hashContainers: HashContainerModel[] = [];
                const hashContainer: HashContainerModel = new HashContainerModel();
                hashContainer.digestAlgorithm = sigContainer.alg;
                hashContainer.bytes = sigContainer.digest;
                hashContainers.push(hashContainer);
                const signatureContainer: SignatureContainerModel = {
                    hashContainers: hashContainers,
                    signature: sigContainer.signature
                };

                console.log('observable inside pipe: ');
                console.log(observ);
            }));


            observables.push(observ);
        }

        return forkJoin(observables);
}

verify() {
    this.sigExec.dissasemble(this.fileContent).subscribe((signatureContainers: SignatureContainerModel[]) => {
                // signatureContainers is [undefined] here
                console.log('Sig Containers: ');
                console.log(signatureContainers);
                this.verifyHash(signatureContainers);
            });
}

signatureContainers variable is appearing as [undefined] within the subscribe method. Despite checking all logs in map functions and seeing them fine, there seems to be an issue that needs to be resolved.

Answer №1

When using the forkJoin operator in RXJS, it is important to note that if any of the inner observables encounter an error, you will lose the value of any other observables that would have completed successfully. To prevent this, make sure to catch errors correctly on the inner observable or handle them on the outside if your main concern is all inner observables completing without errors. Visit the RXJS Documentation for more information.

If you are encountering errors within your pipe, there is a chance that those values are being lost without proper handling.

Furthermore, ensure that you are returning a value from your pipe to avoid potential issues.

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

Starting object arrays in Angular 6 using ES6

As someone who is just starting out with javascript, I have encountered a challenge with a nested class structure. Specifically, I am looking to initialize an array of EventDate objects and assign it to 'this.dates' within the CustomerEvents cons ...

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

My bar chart lacks the spacing between bars that I intended to achieve, and the interactive tooltip doesn't show up when hovering over the bars. I could use some assistance with this. The purpose is to display the value of a specific color when hoveri ...

JavaScript text parsing in real-time changes

I have a need to extract data from a webpage for scientific research purposes. The specific text I'm looking to extract is found within a < span > tag, but traditional HTML parsing methods won't work due to the rapid and constant updates ha ...

Having trouble getting Laravel Full Calendar to function properly with a JQuery and Bootstrap theme

Using the Laravel full calendar package maddhatter/laravel-fullcalendar, I am facing an issue where the package is not recognizing my theme's jQuery, Bootstrap, and Moment. I have included all these in the master blade and extended it in this blade. ...

JavaScript Conversion of Characters to ASCII Values

After converting a string input into a split array, I now need to convert that split array into ASCII for evaluation. Can someone provide guidance on how to do this? ...

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

I have encountered a challenging situation where I am using JavaScript to render data from a data.json file into HTML. Everything seems to be functioning correctly, as the JSON data is being successfully rendered into HTML using a loop, resulting in multip ...

Using the Observable with Http in Angular 2 results in an inability to access the data

I am just starting my journey with Angular 2 and observables, but I decided to dive right in. After installing angular-cli, I set up a simple test project. My goal was straightforward - I wanted to read data from a json file and work with it inside a comp ...

What is the most efficient way to retrieve a document from pouchdb that includes the revision attribute?

I am currently developing an application using the electron framework and integrating pouchdb. As certain values in my database are dynamic and constantly changing, I am looking for a way to track these changes without having to create new documents for ea ...

AngularJS organization by

On this page, I have my list of products displayed: Here is the code used to display the products: <img class="col-xs-2" ng-src="{{producto.photo}}" class="img-responsive " alt="{{producto.nombre}}"> <div class="col-xs-1"> <div class= ...

Retrieve information from various HTTP GET requests prior to issuing a response

Looking for a solution with code that processes an array of data, sends HTTP GET requests for each item, and stores the returned data in a new array before running a specified callback method: function(handlePlayers, runCallback) { var result = []; ...

JavaScript Regex: Removing all characters that are not numbers

There have been several inquiries about this particular question, such as this one on Stack Overflow. Despite my efforts to replicate the solution and research regex, I can't seem to get it to work: $("#button").click(function () { new_number = $ ...

The process of retrieving matching strings from two collections in MongoDB

There are two collections: Collection A consists of: -> {"_id": .... , "data":"demon"} -> {"_id": .... , "data":"god"} and Collection B consists of: -> {"_id": .... , "tit ...

AngularJS - Alter the URL with $state.go without refreshing the HTML content

Struggling with routing in angularJS and can't seem to find a solution despite trying various methods online. Any assistance would be greatly appreciated. Encountering an issue with the $state.go function in which it changes the URL but fails to load ...

Typescript version 2 is facing difficulties in resolving an external node module

Lately, I've been experimenting with prototyping using koa and Typescript 2.0. In my simple project, I've configured the tsconfig.json file like this: { "compilerOptions": { "outDir": "./bin/", "sourceMap": true, "no ...

Ways to transfer a state from the child component to the app component

I have 2 different components that contain sub-components within them. In one of these components, I'm trying to figure out how to transfer the click event from the sub-component to another component so that it can render an entirely new component for ...

What is the best way to access the onclick calling object?

Is there a way to have a handler on the calling object of the onclick event? <a href="123.com" onclick="click123(event);">link</a> <script> function click123(event) { //I need access to <a> in order to man ...

Using the .load() function to import an HTML file from the directory above

I am trying to achieve the following structure: folder1 index folder2 page to load Can I dynamically load the 'page to load' in a div within the 'index' page using DIV.load()? I have attempted various paths (../folder2/page, ./, ...

What is the best way to pass a state within a route component in react-router?

... import { useNavigate, NavigateFunction } from "react-router"; ... function Form(): JSX.Element { const navigateToCountry = (country: string) => { // Code to navigate to country page with the given country } const [selectedCount ...

Displaying today's date in a date picker on an HTML 5 form

Is there a way to set the current date as a placeholder in an HTML 5 form using the code below? Date: <input type="date" placeholder="mm/dd/yyyy" name="date" /> ...

Discover the steps to dynamically set global data in Vue during runtime

I am currently working on a Vue application that requires fetching data from JSP at runtime, which means I cannot use .env files. As a solution, I am attempting to set data in Vue that can be accessed throughout the entire application (components, mixins, ...