Trouble encountered while retrieving the data structure in order to obtain the outcome [VueJs]

I am facing an issue while trying to save information from an HTTP request into a structure and then store it in local storage. When I attempt to retrieve the stored item and print a specific value from the structure, it does not work!

Here is my code:

//Processing the response received from the HTTP request.
.then(function(response) {

    //Storing necessary User Information in a struct.
    let CurrentUser = {
       username: response.data.result.User.username,
       name: response.data.result.User.name,
       token: response.data.result.token,
       id: response.data.result.User.id,
     }

    //Saving user information in local storage.
    localStorage.setItem("CurrentUser", JSON.stringify(CurrentUser));
    var Curr_user = localStorage.getItem("CurrentUser");
    console.log(Curr_user);
    console.log("the name of the current user: " + Curr_user['name']);

})

The output I am receiving is:

{"username":"Myusername","name":"Myname","token":"XXXXXX","id":"YYYYYY"}
the name of the current user: undefined

I need to access the username or id stored in local storage for use in other pages.

Answer №1

LocalStorage saves data as strings, meaning you must first parse the JSON string to access it as an object.

Consider this code snippet:

localStorage.setItem("CurrentUser", JSON.stringify(CurrentUser));
var user = JSON.parse(localStorage.getItem("CurrentUser"));

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

I encountered a crash in my app because of an error in my Node.js backend code that was posting the accessories and slug into the database

My node.js backend code is responsible for adding the accessory and slug to the database, but I am encountering app crashes. const express=require('express'); const Category = require("../models/Category"); const slugify=require('s ...

How should one go about creating an npm package out of a vuejs component and testing it locally?

Initially, I created a vuejs project as a test container using vue-cli. Next, I developed an npm package named "vue-npm-example" from a Vuejs component in my local environment and then imported it into the aforementioned testing project. Within the packag ...

The amazing property of AngularJS - Scope

I have saved this HTML code in a file. Here is the HTML : <!-- checkbox 1 --> <input type="checkbox" name="checkbox1" id="checkbox-group1" ng-model="checkbox1" value="group1"> <input type="checkbox" name="checkbox1" id="checkbox-group2" ng ...

What steps do I need to take in order to transform this code into a MUI component complete with

Having some trouble converting my hero banner code to MUI in a React project. The styling is not coming out correctly. Here is the HTML code: <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120 ...

What is the reason for findUser.username returning as unidentified?

I am encountering an issue where the findUser.username is being printed in my console.log, but the error persists. I would appreciate some assistance with this problem. Thank you. const auth_user = [ { username: "amylussie", password: ...

How does the use of let versus const differ when iterating through a collection?

Utilizing Node.js (ES6) to iterate through each item in a collection like the one provided below: var statuses = [{ statusId: 1, description: 'New' }, { statusId: 2, description: 'Pending' }, { ...

Tips for converting a URL to the correct route in emberjs when the location type is set to history

After creating a basic Ember.js application and setting the router location type to 'history', I encountered an issue with the generated URLs. Instead of the expected URL format like http://localhost/#/post/1, the Ember.js application was changi ...

Tips on how to customize/ng-class within a directive containing a template using replace: true functionality

To keep replace: true, how can ng-class be implemented on the directive below without causing conflicts with the template's ng-class? This currently results in an Angular error: Error: Syntax Error: Token '{' is an unexpected token at co ...

Is it possible to modify the CSS styles for a specific portion of an input value?

Currently, I am in the process of developing a form using React.js where a specific input must match the label written above it. Here is an example: https://i.stack.imgur.com/S2wOV.png If there happens to be a typo, the text should turn red like this: h ...

Ways to prevent onMouseDown from triggering when the element is exclusively clicked?

I'm currently working on developing a game where units (svg elements) are controlled using React. In this game, the units should be draggable, and clicking on a unit should open a form. However, when I click on the unit, only the mousedown event is t ...

Issue encountered while trying to implement a recursive function for mapping through nested elements was not producing the

I am currently working on recursively mapping through an array of nested objects, where each object can potentially contain the same type of objects nested within them. For example: type TOption = { id: string; name: string; options?: TOption; } con ...

The Element Ui component fails to update when the prop of the Vue component changes

In my project, I have a parent component and several child components which all make use of the same prop. This prop is an array of keys that are used for a dropdown menu in element.js. Initially, when the children render for the first time, they do not co ...

Steps to display a NotFound page when the entered path does not match the route in module federation React micro frontends

Typically, if the provided path does not match, we display the NotFound page to the user using the following code snippet <Route path={"*"} component={NotFound} /> However, upon adding this code, I always get redirected to the home page ( ...

Troubleshooting a Codeigniter issue with CSRF and jQuery ajax

Having trouble with posting data using ajax? I keep running into an error related to CSRF and despite my efforts, I have not been able to find a solution. Can someone please assist me with this issue? Here is the error message I am consistently receiving: ...

Exploring the fundamentals of authentication with Express JS

Currently, I am encountering a challenge while attempting to implement basic authentication with Username and Password using Express JS. The problem lies in the fact that when I try to incorporate an if statement within an app.use() function, it does not s ...

Utilizing HTML and JavaScript to dynamically switch stylesheets based on the width of

When it comes to using stylesheets for mobile and non-mobile devices, there is a need for different approaches. The idea of comparing browser height and width in JavaScript seems like a good one, but the implementation may not always work as expected. ...

The issue of background and footer distortion arises in PhoneGap when the keyboard is opened

Currently, I am experiencing screen problems with phonegap. The issue arises when a keyboard is opened, causing the back button at the bottom of the page to move above the keyboard and resulting in the background image appearing shorter. How can this be re ...

Adding choices to dropdown menu in AngularJS

As a beginner in AngularJs, I am struggling with appending options to select boxes created by javascript. Below is the code snippet that is causing the issue. var inputElements = $('<div><label style="float:left;">' + i + '</ ...

AngularJS selection controls: checkbox and dropdown menus

Can someone provide an example that includes a dropdown menu and checkboxes? The options in the checkbox list should match the data in the dropdown. Once a value is selected from the dropdown, the corresponding checkbox option should be automatically chec ...

When using VSCode for Next.js projects, automatic imports from "react" are not supported

* While similar, this question is not a duplicate of this other question; the solutions provided there are tailored for TypeScript and do not seem to apply to JavaScript. In my current project using Next.js in Visual Studio Code, I am facing an issue wher ...