Creating Prototype library tabs with object literal

Question

I have an HTML like this:

<dl>
    <dt class="tab-title">Title</dt>
    <dd class="tab-content">Ain't Life Grand</dd>
</dl>

The final HTML after JS needs to look like this:

<dl>
    <dt class="tab-title">Title</dt>
    <dd class="tab-content">Ain't Life Grand</dd>
    <dt class="tab-title">Another Title</dt>
    <dd class="tab-content">Ain't Life Grand again</dd>
    <dt class="tab-title">How'about Another</dt>
    <dd class="tab-content">Ain't Life Grand last!</dd>
</dl>

The JS I have so far is the following:

<script type="text/javascript">
    var arrayData = {
        titletwo: {
            title: 'Another Title',
            html: 'Ain\'t Life Grand again'
        },
        titlethree: {
            title: 'How\'about Another',
            html: 'Ain\'t Life Grand last!'
        }
    }
    for (var key in arrayData) {
        var obj = arrayData[key];
            $$('dl').insert('<dt class="tab-title">'.obj['title'].'</dt>');
        $$('dl').insert('<dd class="tab-content">'.obj['title'].'</dd>');
    }
</script>

It doesn't seem to do much of anything. Please pitch in!

Answer 1

Your approach is fine, it's just down to these two lines where you're doing something wrong:

$$('dl').insert('<dt class="tab-title">'.obj['title'].'</dt>');
$$('dl').insert('<dd class="tab-content">'.obj['title'].'</dd>');

I can tell you come from PHP because of this; . doesn't do concatenation, use + instead:

$$('dl').insert('<dt class="tab-title">' + obj['title'] + '</dt>');
$$('dl').insert('<dd class="tab-content">' + obj['title'] + '</dd>');

And not that its an error, but a simple matter of preferential style, use the dot operator . to query key-value pairs from an object literal, like this (The following is equivalent):

$$('dl').insert('<dt class="tab-title">' + obj.title + '</dt>');

[Use the bracket notation obj[ "..." ] when you are dynamically querying these values.]