items disappearing

Question

items disappearing

In my Angular application, I am attempting to save and retrieve data between pages using the following function:

$scope.storeData = function () {

    var selections = $scope.devices;
    console.log(selections);

    sessionStorage.setItem('selectedHandsets', JSON.stringify(selections));

    var ss = sessionStorage.getItem('selectedHandsets');
    console.log(ss);

}

However, I have encountered a strange issue. The values 'selectedManufacturer' and 'selectedModel' that I need from selections are visible in the console log output of console.log(selections).

Yet, when I check the contents of ss (retrieved from sessionStorage.selectedHandsets), those keys are mysteriously missing. Even though they were present during the setting of the data into selections, they vanish when logging ss!

The structure of selections is as follows:

[
    [
        { ... },
        { ... },
        selectedModel: { ... },
        selectedManufacturer: { ... }
    ],
    [
        { ... },
        { ... },
        selectedModel: { ... },
        selectedManufacturer: { ... }
    ]
]

If I wrap JSON.stringify() around console.log(selections), the selectedModel and selectedManufacturer disappear. Can anyone explain why this is happening and suggest an appropriate solution?

javascript arrays angularjs

Answer 1

Answer №1

Have you checked the console for any error messages?

It appears that the JSON data is not formatted correctly

[
    [
        { ... },
        { ... },
        selectedModel: { ... },
        selectedManufacuterer: { ... }
    ],
    [
        { ... },
        { ... },
        selectedModel: { ... },
        selectedManufacuterer: { ... }
    ]
]

Please pay attention to

    [
        { ... },
        { ... },
        selectedModel: { ... }, //There shouldn't be a named item in an array here
        selectedManufacuterer: { ... } //There shouldn't be a named item in an array here
    ]

Avoid using named objects within an array.

Corrections have been made:

Your initial approach was similar to this:

var arrayBuff= [];
arrayBuff.push(2);
arrayBuff.push(4);
arrayBuff.push(6);

//this would result in: [2, 4, 6]
console.log(arrayBuff);

arrayBuff.someField = "foobar";

//this would result in: [2, 4, 6, someField: "foobar"]
// which is not a valid array format
console.log(arrayBuff);

Try this instead:

var arrayBuff = {},
    arrayBuff.arrays = [];
arrayBuff.arrays.push(2);
arrayBuff.arrays.push(4);
arrayBuff.arrays.push(6);

//this would result in: { arrays: [2, 4, 6] }
console.log(arrayBuff);

arrayBuff.someField = "foobar";

//this would result in: { arrays: [2, 4, 6], someField: "foobar"}
// this format can be parsed correctly by JSON.stringify
console.log(arrayBuff);

The issue with parsing the named field using JSON.stringify was because it expected an array, not a named object.

Answer 2

Have you checked the console for any error messages?

It appears that the JSON data is not formatted correctly

[
    [
        { ... },
        { ... },
        selectedModel: { ... },
        selectedManufacuterer: { ... }
    ],
    [
        { ... },
        { ... },
        selectedModel: { ... },
        selectedManufacuterer: { ... }
    ]
]

Please pay attention to

    [
        { ... },
        { ... },
        selectedModel: { ... }, //There shouldn't be a named item in an array here
        selectedManufacuterer: { ... } //There shouldn't be a named item in an array here
    ]

Avoid using named objects within an array.

Corrections have been made:

Your initial approach was similar to this:

var arrayBuff= [];
arrayBuff.push(2);
arrayBuff.push(4);
arrayBuff.push(6);

//this would result in: [2, 4, 6]
console.log(arrayBuff);

arrayBuff.someField = "foobar";

//this would result in: [2, 4, 6, someField: "foobar"]
// which is not a valid array format
console.log(arrayBuff);

Try this instead:

var arrayBuff = {},
    arrayBuff.arrays = [];
arrayBuff.arrays.push(2);
arrayBuff.arrays.push(4);
arrayBuff.arrays.push(6);

//this would result in: { arrays: [2, 4, 6] }
console.log(arrayBuff);

arrayBuff.someField = "foobar";

//this would result in: { arrays: [2, 4, 6], someField: "foobar"}
// this format can be parsed correctly by JSON.stringify
console.log(arrayBuff);

The issue with parsing the named field using JSON.stringify was because it expected an array, not a named object.

Answer 3

Answer №2

Yes, the correct approach is to organize your selections into an object structure such as { arrayObjects : [ place your array here], models: [...], brands:[...] }

Answer 4

Yes, the correct approach is to organize your selections into an object structure such as { arrayObjects : [ place your array here], models: [...], brands:[...] }

items disappearing

Answer №1

Answer №2

Similar questions

Warning in React: You cannot use functions as a child element

Transitioning from left to right, picture smoothly scrolls into view using Way

Is there a way to prevent repeating the same value in a consecutive subsection of an array without using a loop?

Ways to retrieve the selected option from a dropdown list

Modifying dynamic input fields based on the selected input field type

The ng-include directive is having trouble finding the partial HTML files

What is the best way to check the validity of a recursive function in Z3 that takes an array selection as an argument in an SMT specification

Using a pre-existing HTML template in an Angular project

simpleCart - Utilizing a modal window for easy input and sending the shopping cart data to PHP in a multidimensional array

Is there a way to retrieve the BrowserRouter history from outside of the BrowserRouter component?

What is the best way to perform a single asynchronous or promise-based fetch request and utilize the retrieved data across multiple functions?

Bot is being inundated with messages containing no content

Leverage JavaScript libraries utilizing namespaces within your Angular application

Challenges of modifying a scope object in Angular through reference

Transforming the elements within an expansive Canvas into a high-quality JPEG image

Problem encountered when trying to use a single button for both opening and closing functionality in JQuery

What is the best way to access the text content of a nested HTML element for automation tasks with Selenium or Protractor?

Steps for updating a specific item within an object in an array of MongoDB document

Null value added to MySQL database using Node.js

Is the syntax incorrect or is there another reason for the empty array being passed, as the "resolve" callback is running before the completion of the for loop?