If one has the output of a JSON.parse readily at hand, is there some legitimate way of storing that object in the DOM as a single entity?

i.e.

jsonObject = JSON.parse(something);

I'd like to consider storing the jsonObject in the DOM as a (child || textNode || ???) of some element and later retrieving it so that immediately after retrieval I could access its contents via the usual:

jsonObject.keyName

I want to avoid adding dozens of dataset attributes and later being forced to extract them one at a time. That's too much work and seems too inefficient if you have dozens of key:value pairs.

If one has the output of a JSON.parse readily at hand, is there some legitimate way of storing that object in the DOM as a single entity?

i.e.

jsonObject = JSON.parse(something);

I'd like to consider storing the jsonObject in the DOM as a (child || textNode || ???) of some element and later retrieving it so that immediately after retrieval I could access its contents via the usual:

jsonObject.keyName

I want to avoid adding dozens of dataset attributes and later being forced to extract them one at a time. That's too much work and seems too inefficient if you have dozens of key:value pairs.

• javascript
• json
• dom

• What kind of things are you storing inside your elements? – Ja͢ck Commented Jul 15, 2013 at 2:19
• I'm writing a Restaurant Point of Sale application. I need to store hundreds of property:value items relating to inventory, purchases, meal formulas, meal options, etc. The JSON thingy is convenient during development by hand coding the files I need. Later I plan on using a DBMS back end to ship those same json strings over and turn them into json objects as a convenient way of objectifying all those key:value pairs. Then I just want to hang that json object on to the DOM element it belongs to. – Bill Gradwohl Commented Jul 15, 2013 at 2:31
• Personally I think you'll be better off with an MVC approach, rather than storing data all over the place. – Ja͢ck Commented Jul 15, 2013 at 2:44

4 Answers 4

Data attributes have to be strings, you can't store objects in them directly. So don't parse the JSON string, just store the JSON string directly in the dataset attribute.

If you use jQuery, its .data() method will take an object, and it will automatically stringify it as needed.

If the elements you want to associate the object with all have IDs, another option is to use a global object as a table, keyed off the element's ID.

jsonTable[id] = jsonObject;

It depends on the life cycle of your page. If you don't intend to reload the page it's better to just leave it as a JavaScript variable on the page.

You can also consider storing the raw JSON in a hidden filed or some other hidden DOM element. Keep in mind though that hidden fields will be posted to the server if you do a post of the page

TGH has the right answer. Leave it as a variable.

An alternative is to use history.pushState() to store it along with the URL to your page. This is helpful if you ever want the user to be able to click the back button and have the json restored to the value it had for that page.

If you want to store a data (JSON) associated with DOM element.

You could use jQuery data function.

e.g., store a JSON to a restaurant row (div)

$("div.restaurant-row").data("info",{purchases: "blablabla", mealFormulas: "xxxxx"});

e.g., fetch DOM associatd data

$("div.restaurant-row").data("info").purchases;    //blablabla

I'm not sure if this is what you want.

Hope this is helpful for you.