我正在尝试在javascript中列出数组的所有NESTED值，但仅获取数组中每个数组的第一个值 [英] I'm trying to list all NESTED values of an array in javascript, but get only the 1st value of each in the array
本文介绍了我正在尝试在javascript中列出数组的所有NESTED值，但仅获取数组中每个数组的第一个值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Template Literals，映射和javascript的新手.我有一个数组，并且我正在使用模板文字将div插入到html中.我正在映射4张专辑.在数组中，我有每个专辑的曲目列表.我正在尝试一次为每张专辑列出一个曲目列表.当我运行代码时，我只会得到每个专辑的第一首曲目，而不是第一张专辑的第一首曲目列表.如何在数组的第一个嵌套中列出所有值?代码如下:
I am a newbe at Template Literals, mapping and javascript. I have an array and I'm using Template Literals to insert a div into an html. I'm mapping the array of 4 albums. In the array I have lists of tracks for each album. I'm trying to list one track list for each album at a time. When I run the code I only get the 1st track of each album instead of the 1st track list of the 1st album. How can I list all the values in the first nest of the array? The code is as follows:
// JavaScript Document
var albumData =[
{
"imageUrl": "music_imgs/covers/genpx1.png",
"artist": "Gen1artist",
"name": "Gen1name",
"release":"released 2017",
"tracks":[
{
"TrackNumber": "1",
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen1Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"2:47"
},
{
"TrackNumber": 2,
"song":"Gen1Track2",
"duration":"0:00"
},
{
"TrackNumber": 3,
"link":"media/ffile_example_MP3_700KB.mp3",
"song":"Gen1Track3",
"songimgUrl": "music_imgs/availsound.png",
"duration":"2:52"
},
{
"TrackNumber": 4,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen1Track4",
"songimgUrl": "music_imgs/availsound.png",
"duration":"3:25"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx2.png",
"artist": "Gen2artist",
"name": "Gen2name",
"release":"released 201x",
"tracks":[
{
"TrackNumber": 1,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen2Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"4:15"
},
{
"TrackNumber": 2,
"song":"Gen2Track2",
"duration":"3:22"
},
{
"TrackNumber": 3,
"song":"Gen2Track3",
"duration":"3:13"
},
{
"TrackNumber": 4,
"song":"Gen2Track4",
"duration":"5:01"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx3.png",
"artist": "Gen3artist",
"name": "Gen3name",
"release":"released 2014",
"tracks":[
{
"TrackNumber": 1,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen3Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"4:04"
},
{
"TrackNumber": 2,
"song":"Gen3Track2",
"duration":"0:00"
},
{
"TrackNumber": 3,
"song":"Gen3Track3",
"duration":"0:00"
},
{
"TrackNumber": 4,
"song":"Gen3Track4",
"duration":"0:00"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx4.png",
"artist": "Gen4artist",
"name": "Gen4name",
"release":"released 2006",
"tracks":[
{
"TrackNumber": 1,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen4Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"3:03"
},
{
"TrackNumber": 2,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen4Track2",
"songimgUrl": "music_imgs/availsound.png",
"duration":"4:36"
},
{
"TrackNumber": 3,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen4Track3",
"songimgUrl": "music_imgs/availsound.png",
"duration":"2:52"
},
{
"TrackNumber": 4,
"song":"Gen4Track4",
"duration":"0:00"
}
]
}
]
var songlist=$(`${albumData.map(function(songs) {
for (var a in songs.tracks) {
return `
<li class="songlist">
<span class="songs">${songs.tracks[a].TrackNumber + ". " + songs.tracks[a].song}</span>
<span class="time">${songs.tracks[a].duration}</span>
</li>
`}
}).join('')
}`)
var playlist=$('#playlist');
$( playlist ).append( songlist );
@charset "UTF-8";
/* CSS Document */
*{
box-sizing: border-box;
}
body{
text-align:center;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8rem;
font-weight:bold;
color:#ffffff;
background-color:#000000;
}
#playlist{
float:right;
width:60%;
padding:10px;
background-color:#373636;
border:dashed #F7060A;
}
.tracklist{
margin:5px;
cursor:pointer;
}
.songs{
float:left;
}
.time{
float:right;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>playlist12-29.1</title>
<link href="mus_css/playlist12-29.1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="playlist">
<!---<li class="tracklist">
<span class="songs"></span>
<span class="time"></span>
</li>--->
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="mus_js/playlist12-29.1.js"></script>
</body>
</html>
推荐答案
因为在foreach循环中有一个return语句.这样就将返回foreach中枚举的第一个值.相反，您应该使用另一个映射从tracks数组生成列表，如下所示
Because you have a return statement inside your foreach loop. So that will return the first value enumerated in foreach. Instead you should use another map to generate a list from tracks array like below
var songlist = $(`${albumData.map(function(songs) {
return songs.tracks.map(r=>`
<li class="tacklist">
<span class="songs">${r.TrackNumber + ". " + r.song}</span>
<span class="time">${r.duration}</span>
</li>
`).join('');
}).join('')
}`);
// JavaScript Document
var albumData = [{
"imageUrl": "music_imgs/covers/genpx1.png",
"artist": "Gen1artist",
"name": "Gen1name",
"release": "released 2017",
"tracks": [{
"TrackNumber": "1",
"link": "media/file_example_MP3_700KB.mp3",
"song": "Gen1Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration": "2:47"
},
{
"TrackNumber": 2,
"song": "Gen1Track2",
"duration": "0:00"
},
{
"TrackNumber": 3,
"link": "media/ffile_example_MP3_700KB.mp3",
"song": "Gen1Track3",
"songimgUrl": "music_imgs/availsound.png",
"duration": "2:52"
},
{
"TrackNumber": 4,
"link": "media/file_example_MP3_700KB.mp3",
"song": "Gen1Track4",
"songimgUrl": "music_imgs/availsound.png",
"duration": "3:25"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx2.png",
"artist": "Gen2artist",
"name": "Gen2name",
"release": "released 201x",
"tracks": [{
"TrackNumber": 1,
"link": "media/file_example_MP3_700KB.mp3",
"song": "Gen2Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration": "4:15"
},
{
"TrackNumber": 2,
"song": "Gen2Track2",
"duration": "3:22"
},
{
"TrackNumber": 3,
"song": "Gen2Track3",
"duration": "3:13"
},
{
"TrackNumber": 4,
"song": "Gen2Track4",
"duration": "5:01"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx3.png",
"artist": "Gen3artist",
"name": "Gen3name",
"release": "released 2014",
"tracks": [{
"TrackNumber": 1,
"link": "media/file_example_MP3_700KB.mp3",
"song": "Gen3Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration": "4:04"
},
{
"TrackNumber": 2,
"song": "Gen3Track2",
"duration": "0:00"
},
{
"TrackNumber": 3,
"song": "Gen3Track3",
"duration": "0:00"
},
{
"TrackNumber": 4,
"song": "Gen3Track4",
"duration": "0:00"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx4.png",
"artist": "Gen4artist",
"name": "Gen4name",
"release": "released 2006",
"tracks": [{
"TrackNumber": 1,
"link": "media/file_example_MP3_700KB.mp3",
"song": "Gen4Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration": "3:03"
},
{
"TrackNumber": 2,
"link": "media/file_example_MP3_700KB.mp3",
"song": "Gen4Track2",
"songimgUrl": "music_imgs/availsound.png",
"duration": "4:36"
},
{
"TrackNumber": 3,
"link": "media/file_example_MP3_700KB.mp3",
"song": "Gen4Track3",
"songimgUrl": "music_imgs/availsound.png",
"duration": "2:52"
},
{
"TrackNumber": 4,
"song": "Gen4Track4",
"duration": "0:00"
}
]
}
]
var songlist = $(`${albumData.map(function(songs) {
return songs.tracks.map(r=>`
<li class="tracklist">
<span class="songs">${r.TrackNumber + ". " + r.song}</span>
<span class="time">${r.duration}</span>
</li>
`).join('');
}).join('')
}`);
var playlist = $('#playlist');
$(playlist).append(songlist);
@charset "UTF-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8rem;
font-weight: bold;
color: #ffffff;
background-color: #000000;
}
#playlist {
float: right;
width: 60%;
padding: 10px;
background-color: #373636;
border: dashed #F7060A;
}
.tracklist {
margin: 5px;
cursor: pointer;
list-style: none;
clear: both;
}
.songs {
float: left;
}
.time {
float: right;
clear: right;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>playlist12-29.1</title>
<link href="mus_css/playlist12-29.1.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="playlist">
<!---<li class="tracklist">
<span class="songs"></span>
<span class="time"></span>
</li>--->
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="mus_js/playlist12-29.1.js"></script>
</body>
</html>
编辑:您通常看到的那些项目符号位于无序列表项的开头.为什么在中间看到它们?因为您使用样式float:left , float right类型的样式，所以它会更改项目符号的位置.您可以做的是:
Those bullets you see normally places at the beginning of an unordered list item. Why you see them in the middle? Because you use styles float:left , float right kind of styles it changes the placement of the bullet. What you can do about it is :
.tracklist {
margin: 5px;
cursor: pointer;
list-style: none; /* remove bullets */
clear: both; /* fix floating so next item should place correctly*/
}
这篇关于我正在尝试在javascript中列出数组的所有NESTED值，但仅获取数组中每个数组的第一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
