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.

I am taking data from a JSON file and using javascript so I can display it on a web page. The json file contains data on a movie cast. Each movie cast has a name, id and characters they play (some play more than one character).

"abridged_cast":[
                            {"name":"Tom Hanks","id":"162655641","characters":["Woody"]},
                            {"name":"Tim Allen","id":"162655909","characters":["Buzz Lightyear"]},
                            {"name":"Joan Cusack","id":"162655020","characters":["Jessie the Cowgirl"]},
                            {"name":"Ned Beatty","id":"162672460","characters":["Lots-o'-Huggin' Bear","Lotso"]},
                            {"name":"Don Rickles","id":"341817905","characters":["Mr. Potato Head"]}
                            ],

I want to display the cast on the web page as follows: Starring: Tom Hanks as Woody, Tim Allen as Buzz Lightyear, Joan Cusack as Jessie the Cowgirl, Ned Beatty as Lots-o'-Huggin' Bear & Lotso, Don Rickles as Mr. Potato Head.

What I am getting: Starring: Tom Hanks as & Woody, Tim Allen as & Buzz Lightyear, Joan Cusack as & Jessie the Cowgirl, Ned Beatty as Lots-o'-Huggin' Bear, & Lotso, Don Rickles as & Mr. Potato Head,

I only want an "&" if the actor plays more than one character and between the last and second last characters. Forr example: Starring: John as Tiger, Lion, Tree & Crow.

I have spent ages trying to figure if out and I really cannot see what I am doing wrong. Here is my javascript:

$(document.body).append('<strong>Starring:</strong> ');
       for (var i = 0;i < movie.abridged_cast.length; i++){
            $(document.body).append(movie.abridged_cast[i].name + " as ");
            for (var j = 0; j < movie.abridged_cast[i].characters.length; j++){
                    if(movie.abridged_cast[i].characters[j] == movie.abridged_cast[i].characters[movie.abridged_cast[i].characters.length -1]
                    // if the character = the character in the last position
                        && movie.abridged_cast[i].characters[j].length -1 > 0){
                        // and the position of the character is greater than 0
                        $(document.body).append('& ' + movie.abridged_cast[i].characters[j] + ', ');
                    }
                    else {
                         $(document.body).append(movie.abridged_cast[i].characters[j] + ', ');
                    }
            }
       }
share|improve this question

3 Answers 3

up vote 0 down vote accepted

Check for characters length and use indexes instead of comparing data

for (var j = 0; j < movie.abridged_cast[i].characters.length; j++){
                // if more than 1 character
                if(movie.abridged_cast[i].characters.length>1
                // and it is the last character in array
                   && j == movie.abridged_cast[i].characters.length-1){
                    $(document.body).append('& ' + movie.abridged_cast[i].characters[j] + ', ');
                }
                else {
                     $(document.body).append(movie.abridged_cast[i].characters[j] + ', ');
                }
        }
share|improve this answer
   for (var i = 0;i < movie.abridged_cast.length; i++){
       if ( movie.abridged_cast[i].characters.length > 0 ) {
            $(document.body).append(movie.abridged_cast[i].name + " as ");
            $(document.body).append(movie.abridged_cast[i].characters[0]);
            if ( movie.abridged_cast[i].characters.length > 1 ) {
                for (var j = 1; j < movie.abridged_cast[i].characters.length-1; j++){
                     $(document.body).append(', ' + movie.abridged_cast[i].characters[j]);
                }
                $(document.body).append(' & ' + movie.abridged_cast[i].characters[movie.abridged_cast[i].characters.length-1]);
            }
            $(document.body).append('<br>');
       }
   }
share|improve this answer

I've used arrays to concatenate the strings as I find them easier to work with. In the example in the fiddle I added an extra name to test for when there are more than two names in the character list.

var summary = ['Starring '];
for (var i = 0, l = data.length; i < l; i++) {
    var txt = [], name = data[i].name, chars = data[i].characters;
    txt.push(name + ' as ');
    if (chars.length > 2) {
      txt.push(chars.slice(0, chars.length - 1).join(', '));
      txt.push(' & ' + chars.pop());
    } else {
      txt.push(chars.join(', '));
    }
    txt = txt.join('');
    if (i < data.length - 1) {
      summary.push(txt + ', ');
    } else {
      summary.push(txt + '.');
    }
}

console.log(summary.join(''));

Or in your case:

$(document.body).append(summary.join(''));

Output

Starring Tom Hanks as Woody, Tim Allen as Buzz Lightyear, Joan Cusack as Jessie the Cowgirl, Ned Beatty as Lots-o'-Huggin' Bear, Lotso & Boo-Boo, Don Rickles as Mr. Potato Head.

Fiddle

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.