Storing JSON: Javascript vs HTML

Question

I'm get a json object from an Ajax request like this:

"items":[      
  {  
      "id":923,
      "id_str":"608475747557236737",
      "uid":407388514,
      "date":"Wed Jun 10 03:28:17 +0000 2015",
      "status":0,
  },
  {  
     "id":923,
      "id_str":"608475747557236737",
      "uid":407388514,
      "date":"Wed Jun 10 03:28:17 +0000 2015",
      "status":0,
   }
]

I loop the json object and generate HTML elements.

My question is if Is best store the json information in each HTML element such us: data-prop1="", data-prop2="" etc, o i keep the data in a javascript var like array?

The information of the HTML element will be send via Ajax request to the server again, so i want to store and restore to send.

Why not to store it as object in javascript?

ItayB
– ItayB

2015-06-10 03:56:40 +00:00
Commented Jun 10, 2015 at 3:56 — ItayB
– ItayB, Commented Jun 10, 2015 at 3:56
Which format will you send data again?

Siamak Ferdos
– Siamak Ferdos

2015-06-10 03:58:31 +00:00
Commented Jun 10, 2015 at 3:58 — Siamak Ferdos
– Siamak Ferdos, Commented Jun 10, 2015 at 3:58

nicholaswmin · Accepted Answer · 2015-06-10 06:26:40Z

3

From a performance point of view it is far better to store it in a variable instead of directly on your HTML elements

DOM operations are expensive (selecting/accessing that HTML element which holds the data).
It's also the most cross-browser compatible way since data attributes only apply on HTML5 browsers

It also easier to console.log it, and inspect it in your Developer tools.

Personally, I use the data-* attributes only when little information (such as a couple of attributes) is needed to be stored for each element and that information would be send by a direct click/hover event on the element itself - Otherwise it doesn't make much sense to me to store it within the DOM.

None is stopping you from saving whole JSON's on the DOM, if you find it easier - However if you keep on doing it you will end up with a very convoluted markup and a pattern that just looks terrible

edited Jun 10, 2015 at 6:26

answered Jun 10, 2015 at 3:57

nicholaswmin

23.2k16 gold badges103 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dropout · Accepted Answer · 2015-06-10 21:30:46Z

1

I am working with a similar scenario currently and I've chosen to implement a model on the client's side which holds the information, because storing everything in the DOM could be harmful to the overall performance.

In other words I have some HTML code, for example

<div id='element-1' class='element'>foo</div>
<div id='element-2' class='element'>bar</div>
<div id='element-3' class='element'>baz</div>

which corresponds to the recieved data

[{id:1, text:'foo'}, {id:2, text:'bar'}, {id:3, text:'baz'}]

and instead of using DOM I have a model object which holds the data, is accessible from everywhere and has methods to search in the data, render it and so on.

A very simplified example of such object could look like this:

function Model() {

    this.data = []; //after recieving the data via Ajax it is stored here

    this.find = find;
    function find(id) {
        //cycle through data and return the correct record
    }

    this.render = render;
    function render(id) {
        var obj = find(id);

        // find the element with $('#element-'+id) and update it's text
    }

    this.update = update;
    function update(id, text) {
        var obj = find(id);
        obj.text = text;
    }        
}

The advantage is that you don't make the DOM heavy and you keep your data in a clean and organized way and the downfall is that you have to keep your displayed data and model data in sync.

edited Jun 10, 2015 at 21:30

answered Jun 10, 2015 at 6:48

Dropout

14k10 gold badges59 silver badges112 bronze badges

5 Comments

Dropout Over a year ago

Of course remember to create an instance of the object when you initialize your project with for example var myModel = new Model(); :)

mauriblint Over a year ago

Thanks Dropout !! it seems that what you're doing is very similar to mine. Is there any way to avoid the loop through all items to find specific id? Maybe I can have about 100+ items in the array, will be efficient? I'm thinking in the possibility to create an array with custom index, for eg Model.data[item_id] = {json object}.

Dropout Over a year ago

Sorry, I'm only using a very simple tree structure for the data and the performance isn't an issue on my side. Maybe you could use some sort of a folder-like system in which IDs would indicate in which branch the data is stored, but this is just an idea. I'm afraid I can't help you with that.

mauriblint Over a year ago

Droput! I found a solution: 1) The Model var Model = { data: {} } 2) Storing data with custom ID Model.data[ the_item.id ] = item_json_object; 3) Geting back the data from ID data = Model.data[ target_id ];

Dropout Over a year ago

@mauriblint yeah sure, you can have the Model as an array of data.. Choose what better suits you.. I've chosen a bit more complex model because I need a lot of functions attached to it.. Thanks for the info though :)

Pradeep Singh · Accepted Answer · 2015-06-10 04:10:34Z

-1

I would recommend not to store anywhere in html, as you going to pass elements to another ajax request. So just create variable in javascript and store it temporary.

answered Jun 10, 2015 at 4:10

Pradeep Singh

879 bronze badges

Collectives™ on Stack Overflow

Storing JSON: Javascript vs HTML

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related