CODEWITHSUNDEEP
javascriptjquery
user1869566
user1869566

Reputation: 110

Change Javascript array to string

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.

Upvotes: 0

Views: 136

Answers (5)

sites
sites

Reputation: 21785

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] || '');
}

Upvotes: 1

zedd45
zedd45

Reputation: 2171

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 );

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 2

vittore
vittore

Reputation: 17579

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

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

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

}

Upvotes: 1

Related Questions