Using AngularJS to manage cookies along with arrays

I am passing my data in this way

$cookies.putObject("currentLocation,values,allLocList", obj, vm.tempData, vm.allLocationList);
The objects obj and vm.tempData are being sent as objects, while vm.allLocationList is an array that contains a JSON object.

When retrieving the data in my state file:

  resolve: {
  entity: function($cookies) {
    return {
      location: $cookies.getObject("currentLocation"),
      values: $cookies.getObject("values"),
      allLocationList: $cookies.getObject("allLocList")
    };
  }
}

Upon reaching the controller, entity.location and entity.values display correctly, but entity.allLocList appears to be undefined. Any suggestions on how to fix this?

javascriptangularjscookies

Answer №1

To save your data, use the syntax 

$cookies.putObject(key, value, [options]);
- check out the $cookies documentation:

Add your values individually (key, value):

$cookies.putObject("currentLocation", obj);
$cookies.putObject("values", vm.tempData);
$cookies.putObject("allLocList", vm.allLocationLis);

Retrieve your saved values

resolve: {
  entity: function($cookies) {
    return {
      location: $cookies.getObject("currentLocation"),
      values: $cookies.getObject("values"),
      allLocationList: $cookies.getObject("allLocList")
    };
  }
}

> For a demonstration, visit this Fiddle link

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

Issue encountered: Next.js has failed to hydrate properly due to a discrepancy between the initial UI and server-rendered content

Uncertain about the cause of this error? The error seems to disappear when I remove the provided code segment. What is triggering this error in the code snippet and how can it be fixed? <div className="relative flex flex-col items-center pt-[85.2 ...

javascriptreactjsnext.jshydration

preserving the factory variable when reloading the page

I am faced with a challenge in my AngularJS website where I have two views - one for a filtered list of posts and another for a specific post. Each view has its own controller, and I need to pass the specified category and page information to the post-spec ...

angularjsfactory

A comparison of Vue's import paths: exploring the variations

Exploring the world of Vue has been exciting but I'm a bit puzzled by the syntax used for importing different libraries. Take, for instance, this import statement: import Vue from 'vue'; import axios from 'axios'; Where do these r ...

javascriptvue.js

"Encountering difficulties when trying to interact with an icon using Protractor

On my website, I have this element: <div uib-popover-template="'isVeiwCompTemplate.html'" popover-is- open="col.colDef.value[row.entity.index]" popover-placement="right" popover- trigger="outsideClick" class="fti-view-composition icon-fti_plu ...

angularjsjasmineprotractor

Create a Rest API and implement server-side rendering concurrently using SailsJs

I am exploring the potential of utilizing the SailsJs framework for nodeJs in order to create an application. Initially, my plan was to construct a REST API in Sails and utilize AngularJs for managing the Front-End. This API would also be beneficial for o ...

javascriptnode.jsangularjsrestsails.js

Is the variable leaping to a superior scope?

A few days back, I encountered a strange bug in my code that has left me puzzled. It appears that a variable declared within a narrower scope is somehow leaking into a broader one. Any insights into what might be going wrong here? Here's a simplified ...

javascriptnode.jsexpressmemoryscope

Utilize a custom function on dynamically generated elements

I am utilizing the following jQuery function: $("#agenda_image_1,#agenda_image_2,#agenda_image_3").PictureCut({ InputOfImageDirectory : "image", PluginFolderOnServer : "../xxx/modules/xxx/assets/js/jQuery-Picture-Cut-master/", Fol ...

javascriptjquerypicturecut

Steps for inserting a video into a new div upon selecting a hyperlink

Looking for a way to link menu elements to corresponding videos in adjacent divs? I have two divs set up - one with the menu list and another right next to it where the videos should be loaded. Forms seem like a potential solution, but I lack expertise i ...

javascriptjqueryhtmlvideovideo-streaming

Issue with page refreshing not functioning on localhost in Rails and AngularJS collaboration

I recently encountered a strange issue while working on my Rails 4.2 + AngularJS 1.5 project. Whenever I attempt to refresh (F5) the main web-page, there's about a 9 out of 10 chance that the refresh doesn't happen correctly. In these cases, all ...

javascriptruby-on-railsangularjsheroku

Convert a two-column layout on the web into a single-column layout for mobile devices, featuring dynamic

Is there a way to style this diagram with CSS that will work on IE11 and all major browsers? It seems like Flexbox doesn't support dynamic height. Do I need separate left and right columns for larger viewports and no columns for smaller viewports? ...

javascripthtmlcssgridflexbox

What is the best way to access the rendered child components within a parent component?

I am seeking a way to retrieve only the visible child components within a parent component. Below is my unsuccessful pseudo-code attempt: parent.component.html <parent (click)="changeVisibility()"> <child *ngIf="visible1"></child> ...

javascriptangulartypescript

In production, the request headers are inexplicably missing the cookies that were previously working flawlessly in the localhost

Currently, I have a backend powered by node.js deployed on Heroku and a frontend built with Next.js deployed on Vercel. To set an HttpCookie from the backend, I am using the following code: .cookie("secureCookie", token, { httpOnly: true, sameS ...

node.jscookiesaxiosnext.jsvercel

Steps to transfer the angularfire log in object to a service file

I am looking to enhance the usage of the logged-in object across my site. I am interested in moving this object to a service so that I can efficiently check for user authentication. Below is my login controller: .controller('LoginCtrl', function ...

angularjsfirebaseangularfirefirebase-authentication

The Date.UTC function is not providing the correct output

While attempting to change Unix timestamps into a more understandable format, I used Date.UTC(2017,09,23);. When running this code, it returned 1508716800000. However, upon verifying on the website , the displayed result showed October 23, 2017 instead o ...

javascript

Can you define the "tab location" in an HTML document using React?

Consider this component I have: https://i.stack.imgur.com/rAeHZ.png React.createClass({ getInitialState: function() { return {pg: 0}; }, nextPage: function(){ this.setState({ pg: this.state.pg+1} ) }, rend ...

javascriptjqueryhtmlreactjs

Inquiries regarding node.js

While delving into research on node.js and Mongodb, I encountered a few areas that require clarification. My aim is to query Mongodb from the web using JavaScript because of my familiarity with the language. Additionally, it aligns well with Mongodb' ...

javascriptnode.jsmongodbweb

Navigating efficiently with AngularJS directives

Hello, I am currently searching for a solution to dynamically modify the navigation links within the navigation bar based on whether a user is logged in or not. Of course, a logged-in user should have access to more pages. I have developed a UserService t ...

javascriptangularjsauthenticationnavigation

Linking two div elements together with a circular connector at the termination point of the line

I am currently working on designing a set of cards that will showcase a timeline. I envision these cards to be connected by lines with circles at each end, for a visually appealing effect. At the moment, I have created the cards themselves but I am struggl ...

javascripthtmlcss

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

javascriptjqueryhtmlcss

Utilizing PHP to dynamically load HTML forms and leveraging JQuery for form submissions

I am currently facing a dilemma that I am unsure how to approach. It seems that JQuery requires unique ID's in order to be called in the document ready function. I use PHP to read my MySQL table and print out HTML forms, each with a button that adds a ...

javascriptphpjqueryhtmlmysql