CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjson
mauriblint
mauriblint

Reputation: 1707

Storing JSON: Javascript vs HTML

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.

Upvotes: 1

Views: 139

Answers (3)

Dropout
Dropout

Reputation: 13876

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.

Upvotes: 1

nicholaswmin
nicholaswmin

Reputation: 23009

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

Upvotes: 3

Pradeep Singh
Pradeep Singh

Reputation: 87

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.

Upvotes: -1

Related Questions