Issue encountered in AngularJS: struggling to store the localStorage item in the scope variable

I've been trying to save the values from 

window.localStorage.getItem('job_id.done_tasks')
into a $scope variable, but I'm encountering difficulties. Can you please review my code?

$scope.done_tasks = {};
$scope.done_tasks = window.localStorage.getItem('job_id.done_tasks');

When I try to alert('$scope.done_tasks');, it returns undefined. However, if I use 

alert(window.localStorage.getItem('job_id.done_tasks'));
, it displays 16,17. I am unsure why I am unable to store the values of 
window.localStorage.getItem('job_id.done_tasks')
in $scope.done_tasks. Any help with this would be appreciated.

javascriptangularjs

Answer №1

If you take a look at the code below, you'll see that local storage is returning a string as its output. To work with this data effectively, you will need to parse it into an object.

$scope.completed_tasks = JSON.parse(window.localStorage.getItem('task_id.completed_tasks'));

Just a reminder:

window.localStorage.setItem(key,value);
window.localStorage.getItem(key);

Local storage operates on a key-value system, meaning that you must use the same key when saving and retrieving 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

Using JavaScript to convert an image URL to a File Object

Looking to obtain an image file from a URL entered into an input box, leading to the transformation of an image URL into a file object. To illustrate, when selecting a random image on Google Images, you can either copy the Image or its URL. In this scena ...

javascriptajaximageurldownload

JavaScript: Modify the dropdown class with a toggle option

Hi there, I'm currently facing a small issue and I could really use some assistance. I have a dropdown menu with two selection options - "green" and "blue", and I need to toggle a class based on the selected option. If you'd like to take a look, ...

javascriptjqueryhtmlcssdrop-down-menu

Issue with Laravel - JavaScript not functioning properly following the passage of a parameter through the route

I am currently working on a website that will display search results from various e-marketplaces. Everything was going smoothly with the JavaScript implementation until I attempted to pass parameters through the route. Once I did that, the results stopped ...

javascriptphphtmljquerylaravel

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?

Recently, I developed a custom API using Node.js to retrieve information about blogs from Medium.com. The API currently provides: The author/main picture of the article Title A link to the article on medium.com (redundant) The entire article text in the ...

javascriptjqueryhtmlnode.jsdom-manipulation

Updating Elements in an Array Using JavaScript is Not Functioning as Expected

In my Angular application, I have included some lines of TypeScript code which involve Boolean variables in the constructor and an array of objects. Each object in this array contains input variables. selftest: boolean; failed: boolean; locoStateItem ...

javascriptarraystypescriptobject

Guide on integrating an Excel file into the ag-grid-angular platform

I was looking for the import method, but I couldn't seem to find it. Does anyone have any idea where it is located? Please inform me! ...

angularangularjsag-gridag-grid-angular

Maintaining the greenery of AngularJS HTML code

Whenever I include ng-options in a select element, the options displayed end up looking like this: <select name="folderId" data-ng-model="message.folderId" data-ng-options="folder.id as folder.name for folder in folders"> <option value="" class= ...

angularjsng-options

The validation errors in the form of CodeIgniter are not being displayed by the JavaScript variable

Currently, I am utilizing the built-in validation_errors() function in CodeIgniter for my login form. The validation errors are displaying correctly in my view, but when I try to echo them into a JavaScript variable within the script to customize notificat ...

javascriptphpjquerycodeignitervalidation

Error: the specified item is not a valid function

As a newcomer to the world of JavaScript, I am eager to learn and explore new concepts. Currently, my focus is on centralizing the code for accessing my MySQL database within my Express JS server using promises. Below is an attempt I have made in achieving ...

javascriptnode.jsexpress

Access to a custom Google Map via an API connection

I currently have multiple custom Google Maps that I created using and they are all associated with my Google account. Is it possible to access these maps using the Google Maps JavaScript API? It seems like the API does not work with manually created maps ...

javascriptjsongoogle-mapsgoogle-maps-api-3

What could be causing the 304 error when using $http.get?

I'm a newcomer to angular and facing an issue with a service that was functioning perfectly, but suddenly stopped. The service I am referring to has the following method. this.retrieveForms = function() { return $http.fetch("/forms"). then(fu ...

javascriptangularjsnode.jscachingsafari

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Check out this link for a demo Whenever I enclose the code below in a </form> element, the drop-down menu collapses. <h5>Advanced with Templating, Filtering and Clear Icon</h5> <p-dropdown [options]="countries" [(ngModel)]=& ...

javascripthtmlangularprimeng-dropdowns

Angular - Manipulating the selected option in a select box from the controller

My issue involves a select box that is defined in the following manner: <select ng-model="selectedSupplier" ng-options="supplier.name for supplier in suppliers"> </select> Within my controller, there is a button that doesn't have any r ...

javascriptangularjs

Creating a unique custom view in React Big Calendar with TypeScript

I'm struggling to create a custom view with the React Big Calendar library. Each time I try to incorporate a calendar component like Timegrid into my custom Week component, I run into an error that says react_devtools_backend.js:2560 Warning: React.cr ...

javascriptreactjstypescriptreact-big-calendar

Splitting Angular modules into separate projects with identical configurations

My Angular project currently consists of approximately 20 different modules. Whenever there is a code change in one module, the entire project needs to be deployed. I am considering breaking down my modules into separate projects for individual deployment. ...

javascriptangulartypescriptuser-interfacemicro-frontend

Tracking changes in real time and calculating the sum with AJAX, PHP, and MySQL for efficient processing

Initially, I kindly request you to read this until the end. I am in dire need of assistance with my problem as I have searched for solutions but still remain clueless. Referring to the image provided, the first 'Product & Total Product' element ...

javascriptphphtmljqueryajax

What is the significance of [Function: bound ] in the context of node debugging?

So I was trying to debug my .js file using node debug and when I used catch(error) { It only displayed [Function: bound ] when I tried console.dir(error) What is causing this issue? How can I access the full error object? And how do I retrieve the stack ...

javascriptnode.js

Changing a field in AngularJS to set validity as true in a different way

After following the guidance provided in this answer to implement custom server-side validation for a unique email constraint, I encountered an issue with my submit function on the controller: function submit(form){ CompanyUser.save(vm.model) .suc ...

angularjsformsvalidationserver-side

Unable to launch webpack due to webpack not being detected

When attempting to start webpack, I entered the following command: npm run dev This was done in the command shell where my project and node_modules are located. Upon running the command, an error appeared in the terminal: > clear; npm run --silent so ...

javascriptnode.jsnpmwebpack

Is there a way to store a SAFEARRAY (an array of bytes) into an HTML hidden field?

Is there a way to extract an array of bytes from an active-x component, save it in an html-form input hidden field, and then send it to the server using form-submit? I'm not sure how to accomplish this. MIDL: HRESULT Data([out, retval] SAFEARRAY(VAR ...

javascriptc++htmlcomatl