Angular: Receiving Error While Map/Catch Returns Identical Values

I am struggling with the code snippet below:

let currentTime:number = (new Date()).getTime();
return this.authenticationService.login(credential).map(data => {
  const token = data.token;
  const id = data.id;
  sessionStorage.setItem('userData', JSON.stringify({currentTime, token, id}));
  return JSON.parse(sessionStorage.getItem('userData'));
}).catch(error => {
  sessionStorage.setItem('userData', JSON.stringify({currentTime, error}));
  return JSON.parse(sessionStorage.getItem('userData'));
});

In this code snippet, both the map and catch methods seem to be returning the same code. When I use the map method and reach the return statement, everything works fine. However, when I reach the return in the catch section, Angular throws an error:

core.js:1598 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
. Can anyone help me understand why this is happening?

Answer №1

According to the error message, it is recommended that you return a promise or an observable...

}).catch(error => {
  sessionStorage.setItem('userData', JSON.stringify({currentTime, error}));
  return Observable.of(JSON.parse(sessionStorage.getItem('userData')));
});

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

Is transitioning from AngularJS to Angular truly imperative?

We currently have a project built with AngularJS, but its support is ending and there are potential security vulnerabilities (CVEs) present. Do we need to transition to a different framework? Our project primarily involves front end development with data b ...

Passing data out of the withTransaction helper using Mongoose

Hi there! Greetings, I'm currently working on extracting data from the mongoose withTransaction callback. The code snippet below shows my current approach using callbacks: const transactionSession = await mongoose.startSession() await transactionSe ...

The Issue of Browsers Freezing or Crashing Due to Ajax Autocomplete

My current project involves implementing Ajax Autocomplete for jQuery and passing additional parameters. While the documentation provides guidance on how to achieve this, I've encountered an issue where attempting to use a value from another field cau ...

Whenever I try to retrieve data from MongoDB using Node.js, I consistently encounter a timeout error

Currently, I am in the process of developing a website using React.js for the front end, Node.js for the back end, and MongoDB as the database. Dummy data has been inserted into the database which can be viewed https://i.sstatic.net/YOzCB.png. The database ...

When selecting an option from jQuery autocomplete, the suggestions data may not always be returned

I have a question about the jQuery autocomplete feature. In my code snippet below, I have an input with the ID aktForm_tiekejas that uses the autocomplete function: $('#aktForm_tiekejas').autocomplete({ serviceUrl: '_tiekejas.php', wid ...

Keep inserting data without the need to frequently close the SQL connection

Forgive me for asking, but I am a PHP newbie and can't find the answer to this question anywhere. I have set up a timed interval using javascript and AJAX to continuously update data from the user to the server. Is there a way to configure PHP to ma ...

When performing an Angular HTTP post, additional parameters are automatically included in the request

Within a directive, I have the following code block: scope.progressCourse = -> req_data = course_id: scope.course.id success: true $http.post( "<%= Rails.application.routes.url_helpers.progress_course_path %>", req_data ).t ...

Successfully executing a JQuery ajax GET request results in receiving truncated data

Recently, I encountered an issue while retrieving a large amount of data from my server using a JQuery ajax GET request. The data returned was truncated unexpectedly (as shown in the image below). However, when I tried accessing the same URL directly throu ...

Troubleshooting: Angular 2 ngIf not functioning properly when using properties in extended classes

I have developed an angular 2 component for a modal that inherits from a base modal class. The base class contains a boolean property to determine if the modal is open or closed, which I am utilizing in the template with *ngIf to toggle the visibility of t ...

Updating the jQuery datatable with new data after a page switch or another action

One of the features on my page is a jQuery datatable that I populate with data using the following script: $(document).ready(function () { var dataTable; $(document).on("click", ".myBtnClass", function () { if (dataTable != null) ...

Using Javascript to convert an SVG file into DOM elements

Seeking assistance with uploading an SVG file and then inspecting or parsing it to utilize the elements and values within the DOM. After extensive searches, I've only found information on parsing from the DOM itself. Is this task feasible? If so, cou ...

How can you programmatically toggle the visibility of a material table footer?

Is it possible to control the visibility of the material table footer using an @Input() variable? I am working on a custom table component that may or may not need a footer, like this <my-component [showFooter]="false"></my-component> My init ...

What is the best way to implement a toggle feature for a single image within a div element that contains multiple images when clicked?

I am facing an issue where I have multiple images stacked on top of each other. When one of the images is clicked, I want a toggle function to activate that changes the opacity of the top image to 0, revealing the image underneath. However, every time I cl ...

The compatibility between JSON and the CORS header 'Access-Control-Allow-Origin' is crucial

I am trying to obtain the value from a JSON file that is located on the server. To retrieve this value, I am using AJAX. However, when checking the console for errors, I receive the following message: Cross-Origin Request Blocked: The Same Origin Poli ...

Updating CodeLens in a VS Code Extension

When using VS Code, certain language extensions can provide codelens that display reference counts above functions, variables, and other symbols. Check it out here. I've recently taken on a project and one of my first tasks is to restructure it. In d ...

Encountering a 400 BAD REQUEST error while attempting to make an AJAX post request in

I'm struggling to grasp the concept of AJAX and I'm perplexed as to why this code snippet isn't functioning properly. When making an AJAX call, I keep encountering a 400 BAD REQUEST error, but the cause eludes me. Below is the AJAX functio ...

How can you create a React form that allows for multiple submissions?

I have a unique application consisting of two components. The navigation bar, which is also a component, contains an input text field for searches. The structure of the navbar component is as follows: const Navbar = () => { const [state, setState] = ...

Unable to retrieve the JSON data obtained with node-fetch

I'm having trouble accessing elements inside a json object fetched from a url using node-fetch. Despite being able to log the json object on the console, I encountered errors like TypeError: data.forEach is not a function when attempting to call a met ...

Struggling to link JSON data with Angular 2 class objects

I am a beginner in Angular 2 and I'm working on creating a service that sends a GET request to receive JSON data. My goal is to bind the results from the JSON to an array of Angular classes. However, I encountered a problem and something seems to have ...

What is the best way to add a side section tracking feature to my website?

I have a unique design concept that includes a side tracking section to monitor user activity and change styles accordingly. Despite my search efforts on the Internet, I have not found anything similar to what I envision. My current idea involves using rea ...