Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
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???

share|improve this question
2  
You cannot use new like that since it's a reserved word. Wrap it in quotes. Secondly, you cannot re-use object keys over and over either. Just two things I noticed immediately. –  Jonathan Sampson Jun 13 '13 at 0:36
    
well then how do I keep getting the same data like new is reused to get it to set correctly. Sorry just a newbie here :D –  EasyBB Jun 13 '13 at 0:46
    
@JonathanSampson: There's no reserved word restriction on property names, though some old browsers will choke on it. –  Crazy Train Jun 13 '13 at 0:47
2  
@CrazyTrain Trying to use new as a property index will result in an unexpected : message. It's a reserved word. –  Jonathan Sampson Jun 13 '13 at 0:49
3  
@CrazyTrain Good catch; you're right. –  Jonathan Sampson Jun 13 '13 at 0:53

3 Answers 3

up vote 1 down vote accepted

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

share|improve this answer
    
I understand now they need to be fixed. I was just trying to make this as easy as possible to the users adding the bbcodes that they want. And I understand pure js is best, but problem with that it isn't cross browser friendly. I started learning Vanilla, and wrote this awesome code completely in JavaScript, and well turns out IE7, IE8, and FF didn't like it very much :) using querySelectorAll, byId, and some others as well –  EasyBB Jun 13 '13 at 1:12
    
accepted thank you I appreciate –  EasyBB Jun 13 '13 at 1:39
    
I wouldn't assume many people are still covering IE7 anymore. IE8 has querySelectorAll. –  Erik Reppen Jun 13 '13 at 1:43
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.

share|improve this answer
    
Ben I tried this in JSBIN and it does not work correctly...? –  EasyBB Jun 13 '13 at 1:02
    
yeah I had some typos. I updated and linked a working jsFiddle. –  Ben McCormick Jun 13 '13 at 1:26
    
thanks ben I appreciate it –  EasyBB Jun 13 '13 at 1:34
    
Or you could just create objects with getter/setter methods that trigger events. –  Erik Reppen Jun 13 '13 at 2:34

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;
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.