Change Javascript array to string

Question

I have the following array in JavaScript

("error", "No name entered", "Invalid Email", "No Message")

The array can also be

("success", "Your message has been sent.")

I would like to create a string that looks like this

<div class="error">
<ul>
    <li>No Name entered</li>
    <li>Invalid Email</li>
    <li>No Message</li>
</ul>
</div>

The first item in the array is used for the div class the rest will be list items,

i've tried using formData[0], formData[1], etc. but that just prints undefined if the array item doesn't exist.

You could dynamically create an unordered list , append the array elements while running it through a loop till the array length — Harsha Venkataramu
– Harsha Venkataramu, Commented May 21, 2013 at 18:24
Why don't use some templating engine like github.com/visionmedia/jade — slobodan.blazeski
– slobodan.blazeski, Commented May 21, 2013 at 18:27
@slobodan.blazeski I guess it is easier to use something like handlebars in this case. — vittore
– vittore, Commented May 21, 2013 at 18:30

David Thomas · Accepted Answer · 2013-05-21 18:32:22Z

2

I'd suggest:

var formData = ["error", "No name entered", "Invalid Email", "No Message"];

for (var i = 0, len = formData.length; i < len; i++) {
    if (i == 0) {
        var wrapper = $('<div />', { 'class' : formData[i] }).appendTo('body');
        $('<ul />').appendTo(wrapper);
    }
    else {
        $('<li />', { text : formData[i] }).appendTo('div.' + formData[0] + ' > ul');
    }
}

JS Fiddle demo.

As pointed out in the comments, though, it'd be easier to avoid re-querying the DOM each iteration, so this version maintains references to the various created-elements:

var formData = ["error", "No name entered", "Invalid Email", "No Message"];

for (var i = 0, len = formData.length; i < len; i++) {
    if (i == 0) {
        var wrapper = $('<div />', { 'class' : formData[i] }).appendTo('body'),
            ul = $('<ul />').appendTo(wrapper);
    }
    else {
        $('<li />', { text : formData[i] }).appendTo(ul);
    }
}

JS Fiddle demo.

References:

edited May 21, 2013 at 18:32

answered May 21, 2013 at 18:27

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ian Over a year ago

Why aren't you storing references to the elements that you create (the ul) and appending the li elements to that, instead of querying the DOM every loop iteration?

David Thomas Over a year ago

@Ian: because, honestly, I thought about doing that when I wrote the original (posted that to provide a useful answer) and then got distracted by dinner. blush...

Ian Over a year ago

@DavidThomas Haha just trying to help :) Good answer, by the way!

tymeJV · Accepted Answer · 2013-05-21 18:27:12Z

1

You can do

var array = ["error", "No name entered", "Invalid Email", "No Message"];

function makeDiv(array) {
var newDiv = '<div class="' + array[0] + '"><ul>';

for (var i = 1; i < array.length; i++) {
        newDiv += '<li>' + array[i] + '</li>';
}

newDiv += '</ul></div>';

//append newDiv somewhere

}

answered May 21, 2013 at 18:27

tymeJV

105k14 gold badges165 silver badges158 bronze badges

3 Comments

Ian Over a year ago

Why would you loop through all items? Always take the first item and make it a div. Then loop from 1 to length. The if/else is unnecessary to include in the loop

tymeJV Over a year ago

@Ian -- Made the changes, makes much more sense...I was over thinking the first element with useless logic :\

Ian Over a year ago

@tymeJV No problem. It was perfectly valid before, I just thought it was a little unnecessary when it's always the first item you're checking for. If it were like every other item, it would obviously need to be included

sites · Accepted Answer · 2013-05-22 00:40:33Z

1

This should do it for you:

$('div').addClass(formData[0]);
$('li').each(function(index, el){ $(el).html(formData[index] || '') });

According comments is better to use a for loop, http://jsperf.com/jquery-each-vs-for-loop/73:

var lis = $('li');
for( int i = 0; i < lis.size(); i ++ ){
  var li = lis.eq(i);
  li.html(formData[i] || '');
}

edited May 22, 2013 at 0:40

answered May 21, 2013 at 18:25

sites

21.9k18 gold badges90 silver badges147 bronze badges

2 Comments

user1781710 Over a year ago

uhg... jQuery .each() is insanely slow!

sites Over a year ago

what to use instead? a for loop?

vittore · Accepted Answer · 2013-05-21 18:27:33Z

0

var formData = ["error", "No name entered", "Invalid Email", "No Message"]
  , first = formData.shift()
  , elem = $('<div />').addClass(first)
  , ul = $('<ul />').appendTo(elem)

 $.each(formData, function( ind, item ) {
    $('<li />').text(item).appendTo(ul)
 })

 // now elem has your DOM element

answered May 21, 2013 at 18:27

vittore

17.6k6 gold badges46 silver badges84 bronze badges

Comments

zedd45 · Accepted Answer · 2013-05-21 18:52:00Z

Would you post the variable names for your arrays? This may be due to a reference error / assignment error.

In the mean time, a simple for loop could do the trick, but you may also want to look into JavaScript templating. It can make things like this much more simple.

Here's a JS Fiddle that may help you: http://jsfiddle.net/HepFw/

var failureMessage = ["error", "No name entered", "Invalid Email", "No Message"],
    successMessage = ["success", "Your message has been sent."];


function getMarkup ( resultArray ) {
    var markup = "";

    for ( var i = 0, loopCount = resultArray.length; i < loopCount; i++) {
        if ( i === 0 ) {
            markup += '<div class="' + resultArray[i] + '"><ul>';
        }
        else {
            markup += '<li>' + resultArray[i] + '</li>';
        }    
    }

    return markup += '</ul></div>';   
}

document.getElementById('so-example-success').innerHTML = getMarkup( successMessage );
document.getElementById('so-example-failure').innerHTML = getMarkup( failureMessage );

Collectives™ on Stack Overflow

Change Javascript array to string

5 Answers 5

3 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related