Extend an array by Parsing JSON

Question

Extend an array by Parsing JSON

I'm struggling to retrieve the JSON string from localStorage and add a new dish to it. It's not functioning correctly, can anyone lend me a hand? I am utilizing TypeScript.

interface Dish { 
    id: number;
    name: string;
    desc: string;
    price: number;   
};

export class BasketService {
    private BASKET: string = 'basket';

    log(dish: Dish) {

        var dishList: Dish[] = [];

        if (!localStorage.getItem(this.BASKET)) {
            dishList.push(dish);    //push the first dish (if local storage is empty)
        }

        //Append an injected dish to the existing local storage.
        dishList.push(JSON.parse(localStorage.getItem(this.BASKET)));
        dishList.push(dish);

        localStorage.setItem(this.BASKET, JSON.stringify(dishList));
    }
}

Expected outcome: The dish should be successfully appended and stored in localStorage for future use.

javascript arrays json typescript angular

Answer 1

Answer №1

When working with arrays in javascript, it is important to understand the correct way to concatenate them. Using array1.push(array2) will push array as an object (1 item) into array1.

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
array1.push(array2);//[1, 2, 3, [4, 5, 6]]

Instead of using push, a better approach is to use Array.prototype.concat. This method allows you to concatenate arrays without modifying the original array.

In order to avoid adding the same element twice when dealing with empty localStorage, consider the following updated code:

var json = localStorage.getItem(this.BASKET);
if (!json) {
    dishList = [dish];
} else {
    dishList = JSON.parse(json);
    dishList.push(dish);
}
localStorage.setItem(this.BASKET, JSON.stringify(dishList));

Answer 2

When working with arrays in javascript, it is important to understand the correct way to concatenate them. Using array1.push(array2) will push array as an object (1 item) into array1.

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
array1.push(array2);//[1, 2, 3, [4, 5, 6]]

Instead of using push, a better approach is to use Array.prototype.concat. This method allows you to concatenate arrays without modifying the original array.

In order to avoid adding the same element twice when dealing with empty localStorage, consider the following updated code:

var json = localStorage.getItem(this.BASKET);
if (!json) {
    dishList = [dish];
} else {
    dishList = JSON.parse(json);
    dishList.push(dish);
}
localStorage.setItem(this.BASKET, JSON.stringify(dishList));

Answer 3

Answer №2

When we use JSON.parse(localStorage.getItem), the result is typically a JSON object represented as an array.

var dish = [];
var test = JSON.parse(localStorage.getItem("dummy"));
// test = {a : ['aa','bb','cc']}
dish = test.a;
dish.push('dd');
test.a = JSON.stringify(dish);
localStorage.setItem("dummy", test);

This process should be adhered to carefully.

It appears that directly pushing the object into the Dishlist could be causing issues.

The code snippet provided is in plain JavaScript since I am not very familiar with TypeScript. I hope this explanation clarifies things for you.

Answer 4

When we use JSON.parse(localStorage.getItem), the result is typically a JSON object represented as an array.

var dish = [];
var test = JSON.parse(localStorage.getItem("dummy"));
// test = {a : ['aa','bb','cc']}
dish = test.a;
dish.push('dd');
test.a = JSON.stringify(dish);
localStorage.setItem("dummy", test);

This process should be adhered to carefully.

It appears that directly pushing the object into the Dishlist could be causing issues.

The code snippet provided is in plain JavaScript since I am not very familiar with TypeScript. I hope this explanation clarifies things for you.

Extend an array by Parsing JSON

Answer №1

Answer №2

Similar questions

how to transfer data from backend servlet to frontend javascript

The error message 'tagName' is not a valid property for type ChildNode in Typescript

Troubleshooting the lack of deep linking functionality in an AngularJS web application when using Node Express server

Choose a random node from Xpath with multiple nodes using JavaScript WebdriverIO

Validating multiple fields that are added dynamically using jQuery

What steps should I take to ensure my clock stays in sync with my runTime function?

What is the best way to send a function to the child component?

An Android error message is displaying: "JSONException: Value [] of type org.json.JSONArray cannot be converted to JSONObject"

Using the datetime picker format will automatically add 5 years to the selected date

The React-Virtualized Autosizer component is returning a height value of 0 when used with VirtualScroll

In search of grabbing an image from a list item and relocating it to sit before the division tagged with class "event-title"

populating information to compress using Javascript

Tips for implementing the handleChange event with CalendarComponent from the PrimeReact library

PHP's `json_encode` is failing to properly convert an array and is outputting `{

Timetable sets anchors raised

Validating HTML using EJS templates set as "text/template" elements

Using JavaScript to Set Values and Manage Session State in APEX

JavaScript failing to load following PHP header() redirect

Error event triggered by Ajax call despite receiving 200 ok response

What are the best techniques for concentrating on a kendo maskedtextbox?