Javascript 嵌套的循环显示来自 JSON 对象数组的数据

Javascript nested for loop displaying data from JSON objects array

本文关键字：JSON 对象 数组 数据 嵌套 循环 显示 Javascript      更新时间：2023-09-26

我正在从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"]}
                            ],

我想在网页上显示演员表，如下所示：演员： 汤姆·汉克斯饰演伍迪，蒂姆·艾伦饰演巴斯光年，琼·库萨克饰演女牛仔杰西，内德·比蒂饰演 Lots-o'-Huggin' Bear & Lotso，唐·里克尔斯饰演土豆头先生。

我得到的：演员： 汤姆·汉克斯饰演 & 伍迪，蒂姆·艾伦饰演 & 巴斯光年，琼·库萨克饰演女牛仔杰西，内德·比蒂饰演 Lots-o'-Huggin' Bear， & Lotso， Don Rickles 饰演 & Mr. Potato Head，

如果演员扮演多个角色，并且在最后一个和倒数第二个角色之间，我只想要一个"&"。Forr 示例：主演： John 飾演 Tiger， Lion， Tree & Crow。

我

花了很长时间试图弄清楚是否，我真的看不出我做错了什么。这是我的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] + ', ');
                    }
            }
       }

检查字符长度并使用索引而不是比较数据

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

我使用数组来连接字符串，因为我发现它们更容易使用。在小提琴的示例中，我添加了一个额外的名称来测试字符列表中何时有两个以上的名称。

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

输出

由汤姆·汉克斯饰演伍迪，蒂姆·艾伦饰演巴斯光年，琼·库萨克饰演女牛仔杰西，内德·比蒂饰演 Lots-o'-Huggin' Bear，Lotso & Boo-Boo，Don Rickles 饰演土豆头先生。

小提琴

相关文章：