Error message: Unexpected character "o" found in JSON data at position 1 within an Angular application

In my Angular project, I have been storing user details in the localStorage under the name 'currentUser'. Everything was working perfectly until recently when an error started to show up.

https://i.sstatic.net/TNuMm.png

The error seems to be originating from the constructor of my code.

constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();
  }

I made some recent changes by adding roles to the user object.

export class User {
    userid: number;
    username: string;
    password: string;
    roles: string[];
}

Answer №1

To save the data, convert it into a JSON string using JSON.stringify and then store it in localStorage

var data = JSON.stringify(responseData); // the response you receive
localStorage.setItem("userDetails", data);

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

Angular RxJS: Trigger an action upon subscribing to or unsubscribing from an observable

I'm in the process of converting some Javascript events into Observables using RxJS within an Angular application built on the Ionic framework. My goal is to begin listening for events when the "client" invokes .subscribe(), and then stop listening wh ...

The type 'FileUpload[][]' cannot be assigned to the type 'AngularFireList<FileUpload[]>'

I'm currently working on an Angular application integrated with Firebase for the purpose of uploading images to the database and retrieving them as well. upload-file.service.ts import {Injectable} from '@angular/core'; import {AngularFireD ...

What is the best way to conceal an HTML label when no value is returned from the database for that particular label in an Angular 5 mobile application?

https://i.sstatic.net/CTSup.pngI have a table displaying various values in HTML format, like so: Name : Arun Kumar Phone(R) : 7604215454 (M): Email: [email protected]. There are cases where certain labels are empty as there is no value for them in th ...

Issue: FlashMessagesService not provided - NullInjectorError

Utilizing Angular 2 flash messages to showcase a message when the user clicks on the logout button has been quite the challenge. Despite adding a provider in navbar.component.ts and conducting various experiments, I still encounter the same error. Outline ...

Custom mapped type results in intermediate forms

I've recently developed a type in Typescript that explicitly blocks specific properties from objects/interfaces. This is necessary because Typescript's excess property checking only kicks in when an object literal is directly assigned, not when i ...

Attempting to invoke setState on a Component before it has been mounted is not valid - tsx

I've searched through various threads regarding this issue, but none of them provided a solution that worked for me. Encountering the error: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a b ...

employing flush for lodash's throttle wrapper

When using TypeScript with JavaScript and Angular: I am trying to use the throttle decorator from lodash to limit an API call while a user is navigating around the page, ensuring that it fires before they leave the site. In my TypeScript constructor, I h ...

The formatting for Angular material radio buttons is malfunctioning

My attempt to include a mat-radio-button in my code is encountering issues. The styles are not applying correctly, despite not having any custom classes or style overrides for the radio buttons. The fill element is off-center and lacks the Angular Material ...

Most effective method for sending an HTTP Post request with a JSON body in Angular 9

Hi there, I'm currently working on a project that requires saving information from 3 text box fields. I've been struggling to figure out how to make a POST request with a JSON body. Here's what I have so far: I've been piecing together ...

Disable and grey out the button while waiting for the Observable to broadcast successfully

component.html <button mat-raised-button color="primary" type="submit"> <mat-icon>account_box</mat-icon> <span *ngIf="!loading">&nbsp;&nbsp;&nbsp;Register</span> <span * ...

Dealing with server-side errors while utilizing react-query and formik

This login page utilizes formik and I am encountering some issues: const handleLogin = () => { const login = useLoginMutation(); return ( <div> <Formik initialValues={{ email: "", password: "" }} ...

getItemForm does not make a second promise call

I have a scenario where my function calls the api.send service twice, however when I run a test expecting it to resolve both promises, only res1 is returned and not res2. How can I ensure that both promises are resolved successfully? Here is my function: ...

The Vue Typescript callback is automatically assigned the type "any" when not explicitly defined

Encountering a TypeScript compiler error while using an anonymous function with lodash debounce in my Vue component's watch option. The error states: "this implicitly has type any." Below is the code snippet of my component: export default defineComp ...

Incorporate real-time validation observables with the power of rxjs

Currently, I am working on implementing an observable for a validation task. There are 2 observables, frontEndValidate and backEndValidate, which I need to process sequentially in a specific order. If any of these observables throws an error, the entire pi ...

The argument provided is a string type, which cannot be assigned to a parameter expecting an object with a 'results' property of type string

When attempting to pass the result.nativeEvent.message to another function, I am encountering the error: Argument of type 'string' is not assignable to parameter of type '{ results: string; } on onUnityMessageController(result.nativeEvent.me ...

Deactivate the button if the mat-radio element is not selected

Here is my setup with a mat-radio-group and a button: <form action=""> <mat-radio-group aria-label="Select an option"> <mat-radio-button value="1">Option 1</mat-radio-button> <mat-radio-b ...

Adjusting the value of a mat-option depending on a condition in *ngIf

When working with my mat-option, I have two different sets of values to choose from: tempTime: TempOptions[] = [ { value: 100, viewValue: '100 points' }, { value: 200, viewValue: '200 points' } ]; tempTimesHighNumber: TempOpt ...

Supabase's edge function is being executed twice, despite only one call being made

I am facing an issue with my edge function in TypeScript at Supabase that connects to our Postgres database and runs a query. The problem is that the function is being executed twice, regardless of whether I run it locally in the CLI or deploy it to produc ...

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

Redirecting a subdomain to an internal path on Azure Static Web App

I am currently managing an Angular application with Azure static web app. Is there a way to redirect a subdomain to an internal path? For example: abc.mydomain.com to mydomain.com/abc I have set up the CNAME in my DNS, but have unsuccessfully tried using ...