Excessive JSON formatting is consuming an excessive amount of storage space

As I work on developing a website that recommends locations to visit in NYC, I am facing an issue with saving JSON data in local storage. My goal is to allow users to add their own suggestions and eventually integrate MongoDB into the site. To build the site's DOM, I rely on the JSON data. However, after around 15 page reloads, I start experiencing a loss of storage space.

[[{"_name": "Stacks Pancake House & Smokehouse BBQ"

transforms into :

"[[{\\\"_name\\\":\\\"Stacks Pancake House & Smo…on\\\

The addition of extra backslashes seems to be the root cause of this problem, as they accumulate with each reload and eventually lead to no more storage space being available. Furthermore, these unnecessary backslashes disrupt the proper building of the site (DOM) from the JSON data. I'm currently unable to pinpoint the exact source of this issue.

GitHub: https://github.com/dogboy602k/NYC146/tree/jsonversion

javascriptjsonweb

Answer №1

To tackle this issue, I implemented a solution that involves adjusting the part related to adding a post (line 420). The else section was eliminated so that only during the initial load, lists are loaded. Adding a new "post" triggers an update of the list, clearing the JSON data for that specific list and then re-adding the updated list. Based on the season and price inputs, a variable called seasonAdjust is modified to determine which list should be removed and re-added for updating purposes.

var seasonAdjusted = "";
if (season != null && price != null) {
    if (season == 'spring') {
        seasonAdjusted = "springlist";
        if (price == 'cheap') {
            springlist[0].push(newPost);
        } else if (price == 'fair') {
            springlist[1].push(newPost);
        } else if (price == 'expensive') {
            springlist[2].push(newPost);
        }
    } else if (season == 'summer') {
        seasonAdjusted = "summerlist";
        //more code
    } else if (season == 'fall') {
        seasonAdjusted = "falllist";
        //more code
    } else if (season == 'winter') {
        seasonAdjusted = "winterlist";
        //more code
    }

    if (seasonAdjusted === "springlist"){
        window.localStorage.removeItem(seasonAdjusted);
        localStorage.setItem('springlist', JSON.stringify(springlist));
    } else if (seasonAdjusted === "summerlist"){
        window.localStorage.removeItem(seasonAdjusted);
        localStorage.setItem('summerlist', JSON.stringify(summerlist));
    } else if (seasonAdjusted === "falllist"){
        window.localStorage.removeItem(seasonAdjusted);
        localStorage.setItem('falllist', JSON.stringify(falllist));
    } else if (seasonAdjusted === "winterlist"){
        window.localStorage.removeItem(seasonAdjusted);
        localStorage.setItem('winterlist', JSON.stringify(winterlist));
    }

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 when compiling a node.js file on Windows 10, resulting in error code 800A03EA

Recently I downloaded and installed Node.js for Windows 10 (x64), accepting all the default settings. C:\WINDOWS\system32>node -v v12.13.0 C:\WINDOWS\system32>npm -v 6.12.0 Next, I decided to test it out by running their "hello ...

javascriptnode.js

using reactjs to dynamically render elements based on the selected condition in a select box

Is there a way to dynamically change an element based on the selected value of a dropdown in React? I'm looking for help with rendering conditions. Here's a snippet of my code: <Col span={12}> <Form.Item label='Qu ...

javascriptreactjs

What is the process of importing the csv-writer module?

Can we use the import statement instead of const createCSVWriter = require('csv-writer').createObjectCsvWriter; Is there a way to achieve this using import ...

javascriptexpresscsves6-modulesimport-csv

What is the best way to transform object request data into a string in an Express application using Node.js

I am trying to save the request data from app.get('/') to a variable, but I keep getting an error "TypeError: Converting circular structure to JSON". var express = require('express') var app = express() var bodyParser = require('b ...

javascriptjsonnode.jsexpressobject

Provide the identification number of a specific row within the modal

I am trying to pass the id of a specific row into a modal popup Link code: <a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="<? echo $row['id']; ?>">Resume</a> Modal code: <div ...

javascriptphpjqueryajaxtwitter-bootstrap

Processing JSON data from an array in PHP

Currently, my code involves utilizing an AJAX request to retrieve data from a database dynamically. The data received is processed by the PHP function json_encode() before being sent back to AJAX. Upon receiving the data through the AJAX request, it is for ...

javascriptphpjqueryjsonajax

Looking for precise information within a Vue b-table by fetching data from an Axios API

My b-table is filled with data from an API hit through Swagger UI, and since there's a large amount of data, I need the search button at the center top of the page to work properly when inputting store code or branch. https://i.stack.imgur.com/l90Zx.p ...

javascriptvue.jsaxiosnuxt.jsbootstrap-vue

Can VueJS Computed handle multiple filters at once?

I am encountering an issue with this code - when I attempt to add another filter inside the computed section, it doesn't work. However, if I remove the additional filter, the code functions correctly. My goal is to have both company and product searc ...

javascriptvue.jsfiltervuejs2vue-component

Ways to access JSON data in JavaScript

I'm experiencing difficulty accessing the JSON data provided below. My approach involves utilizing the JavaScript AJAX success function, and when attempting alerts with the following code, $.ajax({ type:'GET', url:myURL, success : function ...

javascriptjsonajax

In JavaScript, the function yields a proxy rather than an object

Let's say I have an array: const arr = ['one', 'two', 'three'] Now, imagine I have a function that is designed to take an array of strings and return an array of objects: const func = (arr) => arr.map(item => ({str ...

javascriptreactjsjsonnext.js

Encountered difficulty parsing json data using cUrl in a PHP script

This is my first time encountering a web service. The JSON data from the .NET server is received and encoded to base64 by the PHP server. The issue I am facing currently is the inability to access each attribute within the data: Array ( [JSONDataResult] ...

phpjsoncurl

The $OnChange function fails to activate when passing an object by reference

Hi there, I've encountered a problem in my code that I'd like some help with. In my example, I have two components: Parent Component and Child Component. Both components share a field called rules. The Parent Component passes the rules field to ...

javascriptangularjsajax

Passing variables from ExpressJS to JavaScript can be a seamless process

I am struggling with this issue; I am utilizing NodeJS to retrieve a JSON and I must transfer the variable to my page for use by JavaScript. app.get('/test', function(req, res) { res.render('testPage', { myVar: 'My Dat ...

javascriptnode.jsexpress

Enhancing Vue.js Scripts with Laravel Localization Language-Strings

Within my vue.js script, I have successfully implemented a sweetalert using two Laravel localization language strings. Now, I am attempting to utilize the same language strings as data properties in another vue.js component script. The issue arises when t ...

javascriptlaravelvue.jsthislaravel-localization

Bringing JSON data from a PHP file into a Swift project

I currently have a website running on a MySQL database. Now, I am working on developing an iOS app using Swift to interact with this database. To retrieve information from the database and add new data, I plan to use a PHP file to generate a Json file whic ...

phpiosmysqljsonswift

What is the reason behind the necessity of adding an extra slash when reloading the page and controller in AngularJS by using $location.path()?

In AngularJS, when you use $location.path() and pass the same URL as the current one, it does not reload the page and controller. However, if you add an extra slash at the end of the URL like this: $location.path('/currentURL/'); it forces a re ...

javascriptangularjs

Error message encountered: React hydrate TypeError - the function __webpack_require_.i(...) is not recognized as a

I encountered a webpack TypeError while attempting to use hydrate() in my index.js file. Strangely, the error does not appear when I use ReactDOM.render() instead of hydrate. My intention behind using hydrate was for server-side rendering. src/index.js i ...

javascriptreactjswebpackbabeljspackage.json

Every time I receive a message, I find myself inundated with unnecessary information. Is there a way to

I am receiving messages from PubNub, but I am only interested in responses of "Yes" or "No". The messages I'm getting include {u'text':'Yes'} and {u'text':'No'}. How can I filter out the extra information? Belo ...

jsonpython-3.xraspberry-pi3raspbianpubnub

Binding data to custom components in Angular allows for a more flexible

In my current scenario, I am looking to pass a portion of a complex object to an Angular component. <app-component [set]="data.set"></app-component> I want the 'data.set' object in the parent class to always mirror the 'set&apo ...

javascriptangulartypescript

Visual traceroute, like the one on "yougetsignal.com", provides a way to update a div element either on demand or periodically

This is my very first question on a forum, yay! I will do my best to ask clearly and concisely. I am currently working on creating a visual traceroute similar to the one found on yougetsignal.com by Kirk Ouimet. My project is up and running using bash co ...

phpjavascriptajaxtraceroute