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] + ', ');
}
}
}
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] + ', ');
}
}
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>');
}
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.