jQuery Forum

Not sure how much it'll speed up, but instead of:
item.substr(g,1)
try: item[g]
Then, go through this post:
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
( http://groups.google.com/group/jquery-en/browse_thread/thread/9889ebd5e10c9122
)
Instead of concatenating strings into one results variable, use array
items, and then join them at the end.

I'm not sure if it matters in javascript but I would do this:
var length = item.length;
for ( var g = 0; g < length; g++) {
Instead of this:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">
       for (var g=0; g<item.length; g++) {</blockquote>
Cam

assuming that your json items are objects, try this. The console
statements are for Firebug output: comment them out if you don't have
firebug. This uses a few speed tricks.
<script language="javascript">
// sample data
//
var items = {};
items["1"] =
'101010111110010101020110111110100010101020101020101010101100110100';
items["2"] =
'000010101210101011100101101010000111111001010121010000111110001111';

var html = []; // we pop html into here and then join it to get the
html snippet for our page
for(var item in items){
html.push(process(items[item]));
}
console.log(html.join('')); // your final result comes from
html.join('');

function process(item){
var wrapper = [];
wrapper.push('<div class="wrapper">'); // I used a class here to
make it easier to see in results

var ar = item.split(''); // splits the string with all the
numbers into an array
for(var i=0;i<ar.length;i++){
console.log(ar[i]); // outputs each individual item in the
string to the console
switch (ar[i]){
case '0':
wrapper.push('<div class="grey">&nbsp;</div>');
break;
case '1':
wrapper.push('<div class="blue">&nbsp;</div>');
break;
case '2':
wrapper.push('<div class="red">&nbsp;</div>');
break;
}
}
wrapper.push('</div>');
return wrapper.join(''); // returns the wrapper with your divs in it
}
</script>
- Jack
René

Another thought is that you could just do a replace on 0, 1 and 2 in the
string: replace each number with the div you want, then wrap that in a div.
- Jack
Jack Killpatrick wrote:
> assuming that your json items are objects, try this. The console
> statements are for Firebug output: comment them out if you don't have
> firebug. This uses a few speed tricks.
>
> <script language="javascript">
> // sample data
> //
> var items = {};
> items["1"] =
> '101010111110010101020110111110100010101020101020101010101100110100';
> items["2"] =
> '000010101210101011100101101010000111111001010121010000111110001111';
> var html = []; // we pop html into here and then join it to get
> the html snippet for our page
> for(var item in items){
> html.push(process(items[item]));
> }
> console.log(html.join('')); // your final result comes from
> html.join('');
> function process(item){
> var wrapper = [];
> wrapper.push('<div class="wrapper">'); // I used a class here
> to make it easier to see in results
> var ar = item.split(''); // splits the string with all
> the numbers into an array
> for(var i=0;i<ar.length;i++){
> console.log(ar[i]); // outputs each individual item in the
> string to the console
>
> switch (ar[i]){
> case '0':
> wrapper.push('<div class="grey">&nbsp;</div>');
> break;
> case '1':
> wrapper.push('<div class="blue">&nbsp;</div>');
> break;
> case '2':
> wrapper.push('<div class="red">&nbsp;</div>');
> break;
> }
> }
> wrapper.push('</div>');
> return wrapper.join(''); // returns the wrapper with your divs
> in it
> }
> </script>
>
> - Jack
>
> René

> Another thought is that you could just do a replace on 0, 1 and 2 in the
> string: replace each number with the div you want, then wrap that in a div.
Yeah, I was wondering whether the regexp engine would be faster.
Something like this:
for(var item in items){
html.push(
'<div class="wrapper">',
process(items[item]),
'</div>'
);
function process(item)
{
return item.replace(/\d/g, function(d){
return '<div class="'+
["gray","blue","red][d]+
'">&nbsp;</div>';
});
}

That "for( i in items )" loop isn't guaranteed to enumerate the items in any
particular order. If you need something to be in a particular order, don't
use an object with string property names. Use an array, e.g.
var items = [

"101010111110010101020110111110100010101020101020101010101100110100",

"000010101210101011100101101010000111111001010121010000111110001111",
...
];
Then you can code:
var classes = [ 'grey', 'blue', 'red' ];
var html = [], h = -1;
html[++h] = '<div>';
for( var item, i = -1; item = items[++i]; ) {
html[++h] = '<div class="row">';
var values = item.split('');
for( var value, j = -1; value = values[++j]; ) {
html[++h] = '<div class="';
html[++h] = classes[+value];
html[++h] = '">&nbsp;</div>';
}
html[++h] = '</div>';
}
html[++h] = '</div>';
html = html.join('');
I added a wrapper div around each row with class="row" - my guess is you
probably need something like that, because you want this to be a
two-dimensional display, right?
-Mike