我目前正在更新我的网站以使用我的新API,但是我一直坚持在每个循环中访问嵌套对象。我不知道该如何描述它了,因为我是整个ajax json类型的东西的新手。也许,如果您查看我的API输出和我想出的JS,您将会明白我的意思。
这是我的代码,实际上没有用...
$.ajax({
url: "https://api.reyfm.de/v3/channel-sequence",
dataType: 'json',
success: function(data) {
rfm.log('Erfolgreich geladen.');
$.each(data, function(key, value) {
//COVER
rfm.log('Coverart CHN' + key + ': ' + value);;
$("#channel-" + key + " .cover").attr("src", (value));
});
},
error: function() {
log('Ein Fehler ist aufgetreten: API nicht verfügbar.');
}
});
这是我要从以下位置加载数据的API:https://api.reyfm.de/v3/channel-sequence
答案 0 :(得分:0)
您的循环是错误的。更改为:
.each(data, function(key, value) {
收件人:
$.each(data.channels, function(key, value) {
另一个错误是选择器中的空格:
$("#channel-" + key + " .cover")
^
无论如何,当您按ID选择时,不需要任何其他属性。足够了:
$("#channel-" + key)
您的最后一个问题是如何访问元素网址:
value.coverurl
代替:
(value)
您的循环现在是:
$.each(data.channels, function(key, value) {
$("#channel-" + key).attr("src", value.coverurl);
});
var data = {
"all-listeners": "235",
"channels": {
"1": {
"id": "1",
"name": "original",
"listeners": "128",
"artist": "KHALID, 6LACK, TY DOLLA $IGN",
"title": "OTW",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/khalid6lacktydollaign_otw.jpg"
},
"2": {
"id": "2",
"name": "nightlife",
"listeners": "7",
"artist": "LUCA DEBONAIRE",
"title": "STRANGERS",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/lucadebonaire_strangers.jpg"
},
"3": {
"id": "3",
"name": "raproyal",
"listeners": "27",
"artist": "GRINGO, NIMO",
"title": "BLUE LAGOON",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/gringonimo_bluelagoon.jpg"
},
"4": {
"id": "4",
"name": "underground",
"listeners": "1",
"artist": "KODAK BLACK",
"title": "TUNNEL VISION",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/kodakblack_tunnelvision.jpg"
},
"5": {
"id": "5",
"name": "hitsonly",
"listeners": "16",
"artist": "BEBE REXHA",
"title": "I'M A MESS",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/beberexha_imamess.jpg"
},
"6": {
"id": "6",
"name": "gaming",
"listeners": "15",
"artist": "ZEDD & MAREN MORRIS",
"title": "THE MIDDLE",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/zeddmarenmorris_themiddle.jpg"
},
"7": {
"id": "7",
"name": "houseparty",
"listeners": "2",
"artist": "MURAT SEKER",
"title": "WOLKE 10 (MURAT SEKER REMIX)",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/muratseker_wolke10muratseker_remix.jpg"
},
"8": {
"id": "8",
"name": "chillout",
"listeners": "10",
"artist": "LUKAS GRAHAM",
"title": "LOVE SOMEONE",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/lukasgraham_lovesomeone.jpg"
},
"9": {
"id": "9",
"name": "exclusive",
"listeners": "4",
"artist": "LIKA MORGAN",
"title": "IN MOTION",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/likamorgan_inmotion.jpg"
},
"10": {
"id": "10",
"name": "dancehall",
"listeners": "2",
"artist": "SQUASH",
"title": "ALLERGY",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/squash_allergy.jpg"
},
"11": {
"id": "11",
"name": "summerjam",
"listeners": "7",
"artist": "MAJOR LAZER",
"title": "RUN UP (FEAT. PARTYNEXTDOOR & NICKI MINAJ)",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/majorlazer_runup.jpg"
},
"12": {
"id": "12",
"name": "oldschool",
"listeners": "2",
"artist": "KID CUDI, MGMT, RATATAT",
"title": "PURSUIT OF HAPPINESS",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/kidcudimgmtratatat_pursuitofhappiness.jpg"
},
"13": {
"id": "13",
"name": "mashup",
"listeners": "4",
"artist": "DJ LICIOUS",
"title": "I HEAR YOU CALLING (ZONDERLING REMIX)",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/djlicious_ihearyoucallingzonderling_remix.jpg"
},
"14": {
"id": "14",
"name": "charts",
"listeners": "10",
"artist": "RUDIMENTAL",
"title": "THESE DAYS (FEAT. JESS GLYNNE, MACKLEMORE & DAN CAPLEN)",
"coverurl": "https:\/\/cdn.reyfm.de\/coverbilder\/rudimental_thesedays.jpg"
}
}
}
$.each(data.channels, function(key, value) {
$("#channel-" + key).attr("href", value.coverurl);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="channel-1" class="cover">channel-1</a>
<a id="channel-2" class="cover">channel-2</a>
<a id="channel-3" class="cover">channel-3</a>
<a id="channel-4" class="cover">channel-4</a>
<a id="channel-5" class="cover">channel-5</a>
<a id="channel-6" class="cover">channel-6</a>
<a id="channel-7" class="cover">channel-7</a>
<a id="channel-8" class="cover">channel-8</a>
<a id="channel-9" class="cover">channel-9</a>
<a id="channel-10" class="cover">channel-10</a>
<a id="channel-11" class="cover">channel-11</a>
<a id="channel-12" class="cover">channel-12</a>
<a id="channel-13" class="cover">channel-13</a>