如何将JSON数据插入到动态下拉列表中？
如何将JSON数据插入到动态下拉列表中？
提问于 2020-04-12 21:29:31
我想将json数据插入到两个<select>标记中。第一个下拉列表包含专辑，第二个下拉列表应包含与所选专辑关联的曲目。第一个下拉菜单正确填充了我的json数据，但是我一直在想为什么第二个下拉菜单没有完全填满提供的youtube最终结果应该是：-用户选择专辑->用户选择曲目youtube曲目将自动在iframe中播放->视频。
任何帮助都是非常受欢迎的，因为我对这一切还是个新手。
HTML：
<body>
<form oninput="play(track.value)">
<div>Band:
<select id="artiest">
</select>
</div>
<br>
<div>Track:
<select id="tracks">
</select>
</div>
<script>main()</script>
</form>
<iframe width="520" height="280" id="player" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" src=""></iframe>
</body>JSON：
[
{
"id" : "1", "artiest" : "A$AP Rocky", "name" : "Testing",
"tracks" : [
{"url" : "https://www.youtube.com/embed/yEG2VTHS9yg", "titel" : "L$D", "duration" : "3:58"},
{"url" : "https://www.youtube.com/embed/Kbj2Zss-5GY", "titel" : "Praise The Lord", "duration" : "3:25"}
]
},
{
"id" : "2", "artiest" : "A$AP Rocky", "name" : "AT.LONG.LAST.A$AP",
"tracks" : [
{"url" : "https://www.youtube.com/embed/ZJM4AQSbZDk", "titel" : "Love$ick", "duration" : "3:12"},
{"url" : "https://www.youtube.com/embed/KfVIRigPyws", "titel" : "Everyday", "duration" : "4:21"}
]
},
{
"id" : "3", "artiest" : "Travis Scott", "name" : "Birds In The Trap Sing McKnight",
"tracks" : [
{"url" : "https://www.youtube.com/embed/Dst9gZkq1a8", "titel" : "Goosebumps", "duration" : "4:04"},
{"url" : "https://www.youtube.com/embed/tfSS1e3kYeo", "titel" : "Highest in the room", "duration" : "2:56"}
]
},
{
"id" : "4", "artiest": "Travis Scott", "name" : "ASTROWORLD",
"tracks" : [
{"url" : "https://www.youtube.com/embed/_EyZUTDAH0U", "titel" : "BUTTERFLY EFFECT", "duration" : "3:11"},
{"url" : "https://www.youtube.com/embed/6ONRf7h3Mdk", "titel" : "SICKO MODE", "duration" : "5:13"}
]
}
]JS：
// Request
async function getJson(url) {
let response = await fetch(url);
return response.json();
}
async function main() {
let artist = await getJson("jukebox.json");
let options = "";
for (var a in artist) {
options += "<option>" + artist[a].artiest + ":" + artist[a].name + "</option>";
}
document.getElementById("artiest").innerHTML = options;
await showTracks(artist[0].tracks);
artiest.addEventListener("change", function(ev){
showTracks(artiest.value)
})
}
main();
async function showTracks(id) {
let artist = await getJson('jukebox.json');
for (let i = 0; i < artist.length; i++){
var data = artist[i].tracks;
var urls = "";
for (var a = 0; i < 2; a++) {
//urls += '<option>' + data[a].url + '</option>';
document.getElementById('tracks').innerHTML += '<option>' + data[a].titel + "" + data[a].duration + '</option>';
}}
}编辑：
async function main() {
let artist = await getJson("jukebox.json");
let options = "";
for (let a =0; a < artist.length; a++) {
options += "<option>" + artist[a].artiest + ": " + artist[a].name + "</option>";
}
document.getElementById("artiest").innerHTML = options;
await showTracks(artist[0].artiest);
document.getElementById("artiest").addEventListener("change", function(){
var x = document.getElementById("artiest").selectedIndex;
showTracks(x.index)
});
}
async function showTracks(artiest) {
let artist = await getJson("jukebox.json", function () {
});
let data = artist.filter(el => el.artiest === artiest)[0].tracks;
for (let a = 0; a < artist.length; a++) {
document.getElementById("tracks").innerHTML += "<option>" + data[a].titel + ": " + data[a].duration + "</option>";
}
}回答 1
Stack Overflow用户
发布于 2020-04-12 22:26:41
以下是导致tracks select无法工作的问题：
showTracks不使用它的arguments- You're来传递
Arrayof tracks，但是该函数不使用它的arguments - You're来传递
showTracksvalueof aselect，它的选项没有显式定义value属性。你最好使用select.selectedIndex而不是select.value：showTracks的https://www.w3schools.com/jsref/dom_obj_select.asp - The逻辑需要改进。它需要这样做：
- Take the index of the artist (number from 0 to 3)
- Get the tracks of the artist with the given index
- Empty the content of the tracks selector
- For every track in the selected artist's tracks, create an append an option to the tracks selector.
一些建议：
- 使用
document.createElement而不是element.innerHTML。您的代码将更容易理解：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement - Review循环方法(特别是for of和for in )：
// Request
async function getJson(url) {
let response = await fetch(url);
return response.json();
}
async function main() {
let artist = await getJson("jukebox.json");
let options = "";
for (var a in artist) {
options += "<option>" + artist[a].artiest + ":" + artist[a].name + "</option>";
}
document.getElementById("artiest").innerHTML = options;
await showTracks(artist[0].tracks); // See note 2)
artiest.addEventListener("change", function(ev){
showTracks(artiest.value) // See note 3)
})
}
main();
async function showTracks(id) { // See note 1)
let artist = await getJson('jukebox.json');
for (let i = 0; i < artist.length; i++){
var data = artist[i].tracks;
var urls = "";
for (var a = 0; i < 2; a++) {
//urls += '<option>' + data[a].url + '</option>';
document.getElementById('tracks').innerHTML = '<option>' + data[a].titel + "" + data[a].duration + '</option>';
}}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61172222
复制相关文章
相似问题
腾讯云开发者
