I'；我试图在javascript中列出一个数组的所有嵌套值，但只获取数组中每个嵌套值的第一个值

我是模板文字、映射和javascript方面的新手。我有一个数组，我使用模板文本将div插入到html中。我正在映射4张专辑的数组。在数组中，我有每个专辑的曲目列表。我试图一次为每张专辑列出一个曲目列表。当我运行代码时，我只得到每个专辑的第一首曲目，而不是第一张专辑的第一首曲目列表。如何列出数组第一个嵌套中的所有值？代码如下：

//JavaScript文档
变量数据=[
{	
“imageUrl”：“music_imgs/covers/genpx1.png”，
“艺术家”：“第1代艺术家”，
“名称”：“Gen1name”，
“发布”：“2017年发布”，
“轨道”：[
{
“轨道号”：“1”，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen1Track1”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“2:47”
},
{
“轨道号”：2，
“歌曲”：“Gen1Track2”，
“持续时间”：“0:00”
},
{
“轨道号”：3，
“链接”：“媒体/ffile\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen1Track3”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“2:52”
},
{
“轨道号”：4，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen1Track4”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“3:25”
}
]
},
{
“imageUrl”：“music_imgs/covers/genpx2.png”，
“艺术家”：“第二代艺术家”，
“名称”：“Gen2name”，
“发布”：“发布201x”，
“轨道”：[
{
“轨道号”：1，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen2Track1”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“4:15”
},
{
“轨道号”：2，
“歌曲”：“Gen2Track2”，
“持续时间”：“3:22”
},
{
“轨道号”：3，
“歌曲”：“Gen2Track3”，
“持续时间”：“3:13”
},
{
“轨道号”：4，
“歌曲”：“Gen2Track4”，
“持续时间”：“5:01”
}
]
},
{
“imageUrl”：“music_imgs/covers/genpx3.png”，
“艺术家”：“第三代艺术家”，
“名称”：“Gen3name”，
“发布”：“2014年发布”，
“轨道”：[
{
“轨道号”：1，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen3Track1”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“4:04”
},
{
“轨道号”：2，
“歌曲”：“Gen3Track2”，
“持续时间”：“0:00”
},
{
“轨道号”：3，
“歌曲”：“Gen3Track3”，
“持续时间”：“0:00”
},
{
“轨道号”：4，
“歌曲”：“Gen3Track4”，
“持续时间”：“0:00”
}
]
},
{
“imageUrl”：“music_imgs/covers/genpx4.png”，
“艺术家”：“Gen4artist”，
“名称”：“Gen4name”，
“发布”：“2006年发布”，
“轨道”：[
{
“轨道号”：1，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen4Track1”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“3:03”
},
{
“轨道号”：2，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen4Track2”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“4:36”
},
{
“轨道号”：3，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen4Track3”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“2:52”
},
{
“轨道号”：4，
“歌曲”：“Gen4Track4”，
“持续时间”：“0:00”
}
]
}
]
var songlist=$（`${albumData.map（函数（歌曲））{
for（songs.tracks中的变量a）{
返回`

${songs.tracks[a].TrackNumber+“+songs.tracks[a].song}
${songs.tracks[a].duration}

`}
}).加入（“”）
}`)
var playlist=$（“#playlist”）；
$（播放列表）.append（歌曲列表）
@charset“UTF-8”；
/*CSS文档*/
*{
框大小：边框框；
}
身体{
文本对齐：居中；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：0.8rem；
字体大小：粗体；
颜色：#ffffff；
背景色：#000000；
}
#播放列表{
浮动：对；
宽度：60%；
填充：10px；
背景色：#373636；
边框：虚线#F7060A；
}
.跟踪列表{
保证金：5px；
光标：指针；
}
.歌曲{
浮动：左；
}
.时间{
浮动：对；
}

播放列表12-29.1
因为在
foreach
循环中有一个
return
语句。这样将返回foreach中枚举的第一个值。相反，您应该使用另一个映射从
轨迹
数组生成列表，如下所示

var songlist=$（`${albumData.map（函数（歌曲））{
返回歌曲.tracks.map（r=>`

${r.TrackNumber+“+r.song}
${r.duration}

`).加入（“”）；
}).加入（“”）
}`);


//JavaScript文档
变量数据=[{
“imageUrl”：“music_imgs/covers/genpx1.png”，
“艺术家”：“第1代艺术家”，
“名称”：“Gen1name”，
“发布”：“2017年发布”，
“轨道”：[{
“轨道号”：“1”，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen1Track1”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“2:47”
},
{
“轨道号”：2，
“歌曲”：“Gen1Track2”，
“持续时间”：“0:00”
},
{
“轨道号”：3，
“链接”：“媒体/ffile\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen1Track3”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“2:52”
},
{
“轨道号”：4，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen1Track4”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“3:25”
}
]
},
{
“imageUrl”：“music_imgs/covers/genpx2.png”，
“艺术家”：“第二代艺术家”，
“名称”：“Gen2name”，
“发布”：“发布201x”，
“轨道”：[{
“轨道号”：1，
“链接”：“媒体/文件\u示例\u MP3\u 700KB.MP3”，
“歌曲”：“Gen2Track1”，
“songimgUrl”：“music_imgs/availsound.png”，
“持续时间”：“4:15”
},
{
“轨道号”：2，
“歌曲”：“Gen2Track2”，
“持续时间”：“3:22”
},
{
“轨道号”：3，
“歌曲”：“Gen2Track3”，
“持续时间”：“3:13”
var songlist = albumData.map(function(songs) {
    let value = ''
    for (var a in songs.tracks) {
        value +=
            `<li class="songlist">
                 <span class="songs">${songs.tracks[a].TrackNumber + ".&nbsp;" + songs.tracks[a].song}</span>
                 <span class="time">${songs.tracks[a].duration}</span>
            </li>`
    }
    return value;
});