JavaScript嵌套for循環顯示來自JSON對象的數據數組

Question

我正在從JSON文件中獲取數據並使用JavaScript，因此我可以將其顯示在網頁上。 json文件包含電影強制轉換的數據。每個電影演員都有他們演奏的名字，ID和角色（有些角色扮演多個角色）。

"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"]} 
          ], 

我要顯示在網頁上投如下： 主演：湯姆·漢克斯爲木質，蒂姆·艾倫的巴斯光年，瓊庫薩克爲傑西女牛仔，內德·貝蒂的地段形蹤Huggin '熊&洛特，唐瑞克爾斯先生作爲土豆頭先生。

什麼我得到： 主演：湯姆·漢克斯爲&伍迪，蒂姆·艾倫爲&巴斯光年，瓊庫薩克爲&傑西女牛仔，內德·貝蒂的地段形蹤huggin'的熊，& Lotso，演員Don Rickles as & Potato Head先生，

如果演員扮演多個角色並且在最後和最後一個角色之間扮演角色，我只想要一個「&」。 Forr示例： 主演：約翰如虎，獅子，樹&烏鴉。

我花了很多年試圖弄清楚，我真的不明白我做錯了什麼。下面是我的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] + ', '); 
        } 
      } 
     } 

Answer 1

檢查字符長度和使用索引，而不是比較數據

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

Answer 2

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

Answer 3

我用數組來連接字符串，因爲我覺得他們更易於使用。在小提琴的例子中，我添加了一個額外的名字來測試字符列表中有兩個以上的名字。

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

或者你的情況：

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

輸出

主演湯姆·漢克斯伍迪，蒂姆·艾倫的巴斯光年，瓊·庫薩克作爲傑西女牛仔，內德·貝蒂的地段-o'-Huggin'熊，Lotso & Boo-Boo，Don Rickles爲Potato Head先生。

Fiddle