Transferring an array from AngularJS to the cookiestore

Encountering issues when trying to store arrays in cookiestore. Struggling to add the array to the cookiestore for later access.

angular.module('myApp', ['ngCookies']);
function CartForm($scope, $cookieStore) {
$scope.invoice.items = $cookieStore.get('items');
$scope.addItem = function() {
$scope.invoice.items.push({
    qty: 1,
    description: '',
    cost: 0
 });
$scope.invoice.items = $cookieStore.put('items');
},

 $scope.removeItem = function(index) {
 $scope.invoice.items.splice(index, 1);
 $scope.invoice.items = $cookieStore.put('items');
},

$scope.total = function() {
 var total = 0;
 angular.forEach($scope.invoice.items, function(item) {
     total += item.qty * item.cost;
 })

 return total;
 }
   }

Answer №1

Save information in a cookie using put(key, value);

angular.module('myApp', ['ngCookies']);

function ShoppingCart($scope, $cookieStore) {

$scope.items = $cookieStore.get('cartItems') || [];

$scope.addItem = function() {
    $scope.items.push({
        quantity: 1,
        description: '',
        price: 0
    });
    $cookieStore.put('cartItems', $scope.items);
};

$scope.removeItem = function(index) {
    $scope.items.splice(index, 1);
    $cookieStore.put('cartItems', $scope.items);
};

$scope.calculateTotal = function() {
    var total = 0;
    angular.forEach($scope.items, function(item) {
        total += item.quantity * item.price;
    });
    return total;
};
}

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

Trouble arises when attempting to execute a Vue method through a Vue computed property

It seems that the issue at hand is more related to general JavaScript rather than being specific to VueJS. I have a Vue Method set up to make a Firebase Call and return the requested object, which is functioning properly: methods: { getSponsor (key) { ...

Encountering issues with the functionality of the MUI Select component, causing the application to crash during

The issue has been successfully resolved I have been in the process of constructing a modal that includes a form and incorporating the MUI Select component. However, upon opening the modal, the application encounters an error; removing the Select componen ...

angularjs-multiselect-dropdown option angularjs

I am using a dropdown-multiselect component that leverages Bootstrap's Dropdown functionality along with AngularJS directives and data binding. I am new to AngularJS. <li id="bedsLists"> <div ng-dropdown-multiselect="" options="b ...

Assign a value to the cookie based on the input from the form

I recently asked a similar question, but it seems like I missed providing some context, which is why I couldn't get it to work. My goal is to set a cookie value of a form entry when clicking on it (using the carhartl jquery plugin), but nothing happen ...

Develop a search feature that automatically filters out special characters when searching through a

I am currently developing a Vue-Vuetify application with a PHP backend. I have a list of contacts that include first names, last names, and other details that are not relevant at the moment. My main query is how to search through this list while disregardi ...

Strategies for extracting methods and refactoring to a separate file for better reusability

Still relatively new to the JQuery/javascript realm, I've put together a functional jqgrid with a datepicker and custom control (using jquery auto complete) by piecing together code samples I came across online. This code has been added to a T4 templa ...

Favicon not appearing on Jekyll website

This is my first time working with Jekyll. I'm currently working on localhost and trying to set a favicon for the website. I generated the image.ico and added the code provided to my head.html file. The image appears in my _site folder, but it's ...

The TypeScript type 'Record<string, string>' cannot be directly assigned to a type of 'string'

I can't seem to figure out why this code isn't working. I've encountered similar issues in the past and never found a solution. The snippet goes like this: type dataType = { [key: string]: string | Record<string, string>; ...

Create a PDF document using a combination of charts and tables

When I try to create a PDF file with both the chart and table embedded, only the table is showing up. Can someone please provide me with some suggestions on how to resolve this issue? JSFIDDLE LINK ...

The array is only listed once across all lines

Having an issue with SQL/PDO, I am trying to create an array list of servers in this format: $servers = array( 'server 1' => array('quake3', '194.109.69.61'), 'server 2' => array('cssource', ...

Node.js is indicating that the certificate has expired

When using Mikeal's request library (https://github.com/mikeal/request) to send an https request to a server, I keep encountering an authorization error of CERT_HAS_EXPIRED. request({ url: 'https://www.domain.com/api/endpoint', ...

Tips for extracting only the filename from chokidar instead of the entire file path

I am trying to capture the filename that has been changed, removed, or renamed, but I am currently receiving the full file path. Question: How can I extract only the filename when it is changed, instead of working with the entire file path? This is what ...

What is the best way to add a `<div>` before or after a specific `<p>` element based on the client's height?

I am facing an issue with inserting a div before a paragraph element based on the given clientHeight. Specifically, I need to locate the closest paragraph element from the specified clientHeight and then add a div before or after that particular element. ...

The image fails to load when attempting to retrieve it from a local JSON file

I successfully managed to fetch data dynamically from a local JSON file created in RN. However, when I tried to add images for each profile to be displayed along with the dynamic profile info, the app encountered an error stating that "The component cannot ...

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

What methods can be used to protect (encrypt using Java code) the information in a login form before it is sent to a servlet for

One major concern I have involves sending encrypted data (encrypted before sending the request) to a servlet. I attempted to call a function that encrypts passwords as an example, but I encountered difficulty passing values from JavaScript to Java code in ...

Problem with selecting items in Kendo UI Menu

Problem: The select event is not triggering when clicking on the image in the kendo menu item. My troubleshooting steps: Review the sample code provided below <!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/ken ...

Troubleshooting Node.js - MongoDB document removal issue

I am attempting to delete all documents from a collection that contain a field named uuid with values matching the $in operator along with an array I provide. However, for some reason the deletion is not functioning as expected. Below is the code snippet a ...

What is the issue with undefined params in Next.js?

I have come across an issue with the function in app/api/hello/[slug]/route.ts When I try to log the output, it keeps showing as undefined. Why is this happening? The code snippet from app/api/hello/[slug]/route.ts is shown below: export async function G ...

Issues encountered with Angular POST requests

I have established a registration and login system using passport.js. Additionally, I am incorporating Angular.js in the front-end. However, when Angular is used, the user signup process does not work as expected. Below you can find the code snippets for b ...