如何从我的API访问嵌套对象以及如何将每个循环中的输出解析为元素

时间:2019-06-29 18:10:26

标签: jquery json ajax

我目前正在更新我的网站以使用我的新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

1 个答案:

答案 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>