Is there a way to store the output of a JSON.parse as a single entity in the DOM?
For example:
jsonObject = JSON.parse(something);
I am interested in finding a method to store the jsonObject in the DOM, such as a child element or textNode, so that I can retrieve it later and access its contents easily using jsonObject.keyName.
I want to avoid adding multiple dataset attributes and having to extract them individually. It would be too tedious and inefficient if there are numerous key:value pairs.
It is important to remember that data attributes can only store strings and not objects directly. Therefore, avoid parsing the JSON string and instead store it as a string in the dataset attribute.
If you are using jQuery, you can utilize the .data() method which can accept an object and automatically convert it into a string if necessary.
Alternatively, if the elements you need to link with the object have IDs, you can create a global object acting as a table, using the element's ID as a key.
jsonTable[id] = jsonObject;
The effectiveness of storing data on your page depends heavily on its life cycle. If you have no plans to refresh the page, it might be best to retain it as a JavaScript variable.
Another option is to store the unprocessed JSON in a concealed field or another hidden element within the DOM. However, keep in mind that hidden fields will be included in server posts if you submit the page.
The correct solution provided by TGH should be kept as a variable.
Another option is to utilize history.pushState() to save it along with the URL of your webpage. This method proves useful in scenarios where you might want the user to have the ability to click the back button and restore the JSON data to its original value for that specific page.
Storing JSON data associated with a DOM element can be achieved by using the jQuery data function.
For example, you can store JSON data to a restaurant row (div) like this:
$("div.restaurant-row").data("info",{purchases: "blablabla", mealFormulas: "xxxxx"});
To retrieve the associated data from the DOM, you can do the following:
$("div.restaurant-row").data("info").purchases; //blablabla
If this is not exactly what you had in mind, let me know if there's anything else I can help you with.
I hope this explanation is clear and useful for your needs.
Why is the set method being executed twice? Check the console when you click the star. Removing @click="set(rating)" results in no action, indicating it is not called elsewhere. http://jsfiddle.net/q22tqoLu/ HTML <div id="star-app" v-cloak> ...
Is there a way to extract just the link from each line in order to get the desired output? For example, starting with this input: "url": "https://i.ytimg.com/vi/XGM6sHIJuho/hqdefault1.jpg", "og:image": "https://i.ytimg.com/vi/XGM6sHIJuho/hqdefault2.jpg" ...
In my vue.js application with firebase authentication, I encountered an issue while testing the Login.vue component. To mock firebase auth, I had to simulate the configuration file used for initializing firebase (named firebase.config). It's worth men ...
My goal for this project is to thoroughly examine the path along with all nested elements within the Items and assign them to the details variable. However, due to the limitations of the function inside the useEffect, I am unable to check nested items eff ...
I need a customized validation check for my order form where users are asked to enter their server hostname. The challenge is that I'm using WHMCS with encrypted PHP code and IonCube loaders, making it difficult to add this check. Users can input any ...
I have a Filter tab component that I use in various routes. When I click on a tab, it becomes active. After clicking on one tab, I want it to remain active in other routes as well. How can I achieve this? Any suggestions or articles would be greatly apprec ...
Whenever I fetch data from Firebase using the Rest API, the structure appears like this. { "Dataset1": [ null, { "Key1": 1, "Key2": 2 }, { "Key1": 3, "Key2": 4 ...
Working with ng-grid in angular and I'm wondering how I can successfully select a row by clicking with the mouse and then pressing Enter. Currently, pressing Enter changes the selected row, which is not the desired behavior. I'm looking to have ...
I have generated an HTML table <table id="top_five_table"> <tr> <td> </th> <th>URL</th> <th width="90">Total Hits</th> <th width="380">Percentage of all Hits</th> </tr> <tr> ...
Currently, I am in the process of working on a dynamic dropdown menu that involves select boxes. These values are being pulled directly from a MySQL database (if you're interested, here is how I set up the database). I have successfully retrieved and ...
While I understand that similar questions have been asked numerous times before, I have yet to find a solution that fits my specific needs. My question is regarding how to retrieve the current date and time from the internet rather than relying on the loc ...
Recently, I've been experimenting with using hashes to create animated transitions between pages. Interestingly, the first page that loads (the home page) fades in and out seamlessly. However, when I attempt to navigate to another page, specifically t ...
Currently, I am in the process of developing an npm package called foobar locally. This allows me to make real-time changes and modifications without the need to constantly publish and unpublish the package, which greatly improves my development efficiency ...
Utilizing a YUI function, I am attempting to retrieve a status message from a PHP function that provides the correct status in JSON format. Upon triggering the event, an error message is displayed: "Syntax error unexpected token u" The source code is as ...
I am working with a Grid that includes the use of vue-panZoom. Within the Grid, there is a section that utilizes vue-draggable-resizable, similar to what is depicted in the image below: Image When I drag the gray square (vue-draggable-resizable), the bl ...
How can I capture the user's attention and bring them back to my website when they are on a different tab? I really like the effect used on sephora.pl where an alert pops up with the message 'What are you waiting for?' when you switch tabs. ...
Here is an array of responses: [ { "id":16, "question":"Who is this message for?", "duration":60, "choices":[ { "id":61, "question_ ...
Attempting to update the checkbox state on the UI, but it appears that componentHandler.upgradeElements is not having any effect. I have also attempted to use componentHandler.upgradeAllRegistered(); and componentHandler.upgradeElement. View reproduction ...
In my Spring Boot web application, I have incorporated Bootstrap with features like SB Admin and data tables, all of which are functioning correctly. However, I am facing an issue with implementing a Bootstrap modal popup. Below is my JSP code: <%@ ...
After thoroughly going through Electron's explanations on context isolation, IPC, and security, as well as delving into discussions like this thread about nodeIntegration and this post regarding preload.js, it's clear that there are various appro ...