Как получить доступ к вложенным объектам из моего API и анализировать вывод в каждом цикле по элементам

Question

В настоящее время я обновляю свой веб-сайт, чтобы использовать мой новый API, но я застрял с доступом к вложенным объектам в каждом цикле.Я не знаю, как это описать, потому что я новичок во всем этом.Может быть, если вы посмотрите на мой выход 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

Answer 1

Ваш цикл неправильный.Измените его с:

.each(data, function(key, value) {

на:

$.each(data.channels, function(key, value) {

Другая ошибка - пробел в селекторе:

$("#channel-" + key + " .cover")
                       ^

В любом случае, когда вы выбираете с помощьюID вам не нужно никаких других атрибутов.Достаточно:

$("#channel-" + key)

Ваша последняя проблема - как вы получаете доступ к URL-адресу элемента:

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>