nested array/object creating html?

Question

var bbcodes = 
[{
   contents: {
     newBB:["b","u","i","list"],
     newBB:["j","k","l","m"],
     newBB:["close","stop","back","time"],
   },
}];


for(var j=0;j<bbcodes;j++){
    var temp= '<span class="button_wrap">'; 
    for (var i=0;i<bbcodes.contents.newBB.length;i++){
        temp += '<span class="easy_edit_button easy_button_'
        +bbcodes[j].contents.newBB[j]+'">' 
        +bbcodes[j].contents.newBB[j]+'</span><br />';
     }
}
$('body').append(temp+'</span>');

http://jsbin.com/equfow/1/edit

I'm trying to create this HTML markup in the end

<span class="button_wrap">
    <span class="easy_edit_button easy_button_b">b</span>
    <span class="easy_edit_button easy_button_i">i</span>
    <span class="easy_edit_button easy_button_u">u</span>
    <span class="easy_edit_button easy_button_list">list</span>
</span>
<span class="button_wrap">
    <span class="easy_edit_button easy_button_j">j</span>
    <span class="easy_edit_button easy_button_k">k</span>
    <span class="easy_edit_button easy_button_l">l</span>
    <span class="easy_edit_button easy_button_m">m</span>
</span>
<span class="button_wrap">
    <span class="easy_edit_button easy_button_close">close</span>
    <span class="easy_edit_button easy_button_stop">stop</span>
    <span class="easy_edit_button easy_button_back">back</span>
    <span class="easy_edit_button easy_button_time">time</span>
</span>

just having a difficult time getting the array and object for loop to work I guess???

Answer 1

If, as I think you are suggesting, there is no restriction as to how bbcodes is formatted so long as it produces the correct markup that you have posted. Then I would re-structure it as follows and produce the markup using plain old javascript as follows.

Javascript

var bbcodes = [
    ["b", "u", "i", "list"],
    ["j", "k", "l", "m"],
    ["close", "stop", "back", "time"]
];


bbcodes.forEach(function (group) {
    var wrap = document.createElement("span");

    wrap.className = "button_wrap";

    group.forEach(function (item) {
        var button = document.createElement("span");

        button.className = "easy_edit_button easy_button_" + item;
        button.textContent = item;

        wrap.appendChild(button);
    });

    document.body.appendChild(wrap);
});

On jsfiddle

Why? If the data is fixed then you don't need all the extra objects and as you had it you were using the same "key" multiple times, when it would need to be unique.

This is using Array.forEach , which can easily be shimmed or you could change to while or for loops.

Update : If you don't like to shim, then here is the above but converted to while loops, this is cross-browser friendly without the need to shim. And uses document.createTextNode instead of Node.textContent .

Javascript

var bbcodes = [
        ["b", "u", "i", "list"],
        ["j", "k", "l", "m"],
        ["close", "stop", "back", "time"]
    ],
    bbcodesLength = bbcodes.length,
    bbcodesIndex = 0,
    groupLength,
    groupIndex,
    group,
    item,
    wrap,
    button,
    text;

while (bbcodesIndex < bbcodesLength) {
    group = bbcodes[bbcodesIndex];
    wrap = document.createElement("span");
    wrap.className = "button_wrap";
    groupLength = group.length;
    groupIndex = 0;
    while (groupIndex < groupLength) {
        item = group[groupIndex];
        text = document.createTextNode(item);
        button = document.createElement("span");
        button.className = "easy_edit_button easy_button_" + item;
        button.appendChild(text);
        wrap.appendChild(button);
        groupIndex += 1;
    }

    document.body.appendChild(wrap);
    bbcodesIndex += 1;
}

On jsfiddle

Answer 2

var bbcodes = 
[{
   contents: {
     new:["b","u","i","list"],
     new:["j","k","l","m"],
     new:["close","stop","back","time"],
   },
}];

That object won't work well. You can't use the same key 3 times. This should be a simple 2D array.

$('body').append(temp+'</span>');

Since jQuery appears to be available there are easier ways to do this.

Lets try this

    var bbcodes = [
    ["b","u","i","list"],
    ["j","k","l","m"],
    ["close","stop","back","time"]
];
var i,j,innerspan,outerspan,currentVal,classStr;
for(j=0;j<bbcodes.length;j++){

    outerSpan = $("<span>").addClass("button_wrap");

    for (i=0;i<bbcodes[j].length;i++){

        currentVal = bbcodes[j][i];
        classStr = "easy_edit_button easy_button_"+currentVal;
        innerspan = $("<span>").addClass(classStr).html(currentVal);
        outerSpan.append(innerspan); //add the inner span to the container span
     }
     $("body").append(outerSpan) // add each container span to the body.
}

working fiddle: http://jsfiddle.net/EqjBq/

There are even nicer ways to do this type of thing using an MV? Library like KnockoutJS or Angular. If you are going to be consistently hiding/displaying DOM elements based on values of a JS object you may want to look into one of those.

Answer 3

The array join method is your friend for problems like this. If not for the need to tweak each class, I wouldn't even need the interior loop. It's especially powerful and concise for creating tables and lists when you don't need to add unique attributes.

var bbcodes = 
[
    ["b","u","i","list"],
    ["j","k","l","m"],
    ["close","stop","back","time"]
],
l = bbcodes.length,
joinRight = '<span class="easy_edit_button easy_button_',
joinLeft = '</span>',
outerJoinRight = '<span class="button_wrap">';

while(l--){
    var thisRow = bbcodes[l],
    ll = thisRow.length;

    while(ll--){
        thisRow[ll] += '">' + thisRow[ll];
    }

    bbcodes[l] = joinRight + thisRow.join(joinLeft+joinRight) + joinLeft;
}
bbcodes = outerJoinRight + bbcodes.join(joinLeft + outerJoinRight) + joinLeft;

document.body.innerHTML = bbcodes;