How to exactly work with the JSON Object and jQuery, adding info to posts I have been working with AJAX and JSON for quite some years now, but to be honest I still do not know exactly what all the functionality are, and how to create optimized code for jQuery.

So my first question: Does anyone know a good tutorial, or better even a cheatsheet where are the functionalities are explained. I have Googled and looked at the normal jQuery documentation for years now, but I still can't manage to think in optimized paterns, if that makes any sense at all.

Now to illustrate this with a relevant problem. Currently I am developing a small public plugin that adds various counters to posts, nothing special here.

&lt;ul id="container-60"&gt;
  &lt;li class="counter-x"&gt;&amp;nbsp;&lt;/li&gt;
  &lt;li class="counter-y"&gt;&amp;nbsp;&lt;/li&gt;
  &lt;li class="counter-z"&gt;&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="count-container-64"&gt;
  &lt;li class="counter-x"&gt;&amp;nbsp;&lt;/li&gt;
  &lt;li class="counter-y"&gt;&amp;nbsp;&lt;/li&gt;
  &lt;li class="counter-z"&gt;&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;


Now this has to be filled. The best way I could make this work is with the following json sting:

{ "posts" : 
    { "60" : 
        { "x" : "100", "y" : "200" , "z" : "300" }
    },
    { "64" : 
        { "x" : "400", "y" : "500" , "z" : "560" }
    }
}


Now as for the ajax there is a double loop:

    // AJAX blah blah blah above
success : function( data ){
    posts = data.posts;
    jQuery.each( posts, function( post_id, post_counts ) {
        jQuery.each( post_counts, function( item_name, item_count ) {
            jQuery( '#container-' + post_id + ' .counter-' + item_name ).text( item_count );
        });
    });
}


Now this works fine, but I bet there is a better way for doing this. Maybe change the json string to a more optimized version for doing things quicker.

jQuery has so many special functions.

Anyone have any suggestions.
I don't think that I can give reasons why this is better (i.e. faster).  Only I feel that it is more readable and scalable.

I like to use the data attributes for information like ids.  For a long time, classes were the way to go but we had to deal with cluttered classes :(.  Data attributes keep things cleaner in my opinion–plus it makes it easier to have multiple counters on the page.

&lt;ul class="container"&gt;
  &lt;li class="counter" data-counter="60-x"&gt;x&lt;/li&gt;
  &lt;li class="counter" data-counter="60-y"&gt;y&lt;/li&gt;
  &lt;li class="counter" data-counter="60-z"&gt;z&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="container"&gt;
  &lt;li class="counter" data-counter="64-x"&gt;x&lt;/li&gt;
  &lt;li class="counter" data-counter="64-y"&gt;y&lt;/li&gt;
  &lt;li class="counter" data-counter="64-z"&gt;z&lt;/li&gt;
&lt;/ul&gt;


Using the same data:

var data = {
    "posts": {
        "60": { "x" : "100", "y" : "200" , "z" : "300" },
        "64": { "x" : "400", "y" : "500" , "z" : "560" }
    }
};


And then using javascripts for-in:

var posts = data.posts;

for(var item in posts) {
    for(var counter in posts[item]) {
        var selector = "[data-counter=" + item + "-" + counter + "]",
            count = posts[item][counter];

        $(selector).text(count);   
    }
}