Async function übergabe einer variable klappt nicht

[valerius]

Hallo, 

bin neu hier und eigentlich anfänger im Bereich Javascript, ich bin gerade dabei eine Web App zu erstellen ein Radiostreaming ähnlich radio.de mit verschiedenen sendern. Was ich bis jetzt umgesetzt habe:

Abfrage aller Stationen über API url Liste geht.
Sender spielen wie es sein soll.

An was es bis jetzt scheitert: Kategorie Liste habe ich hinzugefügt, jetzt muss ich beim Klicken auf eine Kategorie ID an API url übergeben damit ich die Kategorie geöffnet bekomme.

Abruf:

Code:

<div onclick="openNav(); getCategoriesRadio(${All_cat[i].id})" class="playlist-card">Inhalt</div>

Hierhin wird es übergeben:

Code:

async function getCategoriesRadio(ids) {
   
   
    const idx = await ids;


    if (idx >= '') {
        let url = await `https://mylink.me/myApi/api.php?method=getRadios&api_key=Uhr huA&offset=0&limit=1000&genre_id=${idx}`;

        try {
            let res = await fetch(url);
            let data = await res.json();
 // Hier ein Alert beim Klicken wird die richtige ID angezeigt          

alert(idx);
            return data;
        } catch (error) {
            console.log(error);
        }

    }




}
async function renderCategoriesRadio() {
  let side = document.querySelector('.video-sec-middle');
  const All_cat_r = await getCategoriesRadio();

  for (let i = 0; i < All_cat_r.length; i++) {
    let Html = `<li class="thumb-wrap"><a href=""><img class="thumb" src="https://my.link/uploads/radios/${All_cat_r[i].img}" alt=""><div class="thumb-info"><p class="thumb-title">${All_cat_r[i].name}</p><p class="thumb-user">${All_cat_r[i].tags}</p><p class="thumb-text">1.3K Views</p></div></a></li>`;
    side.insertAdjacentHTML("beforeend", Html);
  }
}

renderCategoriesRadio();

Zum Test ein Alert eingebaut beim Klicken wird auch die richtige angezeigt aber der Inhalt der sich öffnet bleibt leer.
Wo habe ich denn Fehler? Man könnte es auch ohne If(idx >= '") abfragen dann bekomme ich die ganze Liste angezeigt und nicht nach Kategorie. Die ID wird also nicht an die Url übergeben.

[AndreasB]

Hallo @"valerius"

Zu der Zeile:

Code:

const idx = await ids;

Was erwartest du von der Zeile?
Was steckt denn in ids?

Das Keyword await löst eigentlich das Promise auf, dass dahinter steht.
Steckt denn in ids ein Promise?

Lass dir mal nach der Zeile 4 ausgeben (über die Konsole) was in idx steht und überprüfe ob das der Erwartete Wert ist.

[valerius]

Hallo @"valerius"

Zu der Zeile:

Code:

const idx = await ids;

Was erwartest du von der Zeile?
Was steckt denn in ids?

Das Keyword await löst eigentlich das Promise auf, dass dahinter steht.
Steckt denn in ids ein Promise?

Lass dir mal nach der Zeile 4 ausgeben (über die Konsole) was in idx steht und überprüfe ob das der Erwartete Wert ist.

Hallo Andreas,

Von await ids erwarte ich nicht viel probiere nur Rum. So wie es aussieht wird die json per ID übergeben alle einträge sind vorhanden laut Alert. Aber irgendwie ladet der Inhalt nicht ich blicke es nicht. Konsole ist gut aber Programmiere das ganze übers Smartphone leider keine Konsole im Browser.

Hallo @"valerius"

Zu der Zeile:

Code:

const idx = await ids;

Was erwartest du von der Zeile?
Was steckt denn in ids?

Das Keyword await löst eigentlich das Promise auf, dass dahinter steht.
Steckt denn in ids ein Promise?

Lass dir mal nach der Zeile 4 ausgeben (über die Konsole) was in idx steht und überprüfe ob das der Erwartete Wert ist.

Hallo Andreas,

Von await ids erwarte ich nicht viel probiere nur Rum. So wie es aussieht wird die json per ID übergeben alle einträge sind vorhanden laut Alert. Aber irgendwie ladet der Inhalt nicht ich blicke es nicht. Konsole ist gut aber Programmiere das ganze übers Smartphone leider keine Konsole im Browser.

---

---

Also ich Versuche es nochmal bisschen Code abgeändert:

Code:

async function getCategoriesRadio(ids) {

    let url = `https://mylink.me/myApi/api.php?method=getRadios&api_key=key&offset=0&limit=1000&genre_id=${ids}`;


    try {

        let res = await fetch(url);
        let data = await res.json();

        // Hier ein Alert beim Klicken wird die richtige ID angezeigt
        alert(JSON.stringify(data));
        return data;
    } catch (error) {

        console.log(error);
    }
}

async function renderCategoriesRadio() {

    let side = document.querySelector('.video-sec-middle');

    const All_cat_r = await getCategoriesRadio();



    for (let i = 0; i < All_cat_r.length; i++) {

        let Html = `<li class="thumb-wrap"><a href=""><img class="thumb" src="https://mylink.me//uploads/radios/${All_cat_r[i].img}" alt=""><div class="thumb-info"><p class="thumb-title">${All_cat_r[i].name}</p><p class="thumb-user">${All_cat_r[i].tags}</p><p class="thumb-text">1.3K Views</p></div></a></li>`;

        side.insertAdjacentHTML("beforeend", Html);

    }

}



renderCategoriesRadio();

Folgendes passiert beim Laden der Seite Alert geht auf und gibt mir die gesamte Liste der Radiosender aus. Also vermute ich das beim Laden der Inhalt der gesamten Liste erfolgt, bevor überhaupt die ID übergeben würde. Wenn ich ich jetzt auf die Kategorie drücke kommt nochmal Alert mit der passenden Json Inhalt ,aber der Inhalt wurde ja schon als gesamte Liste geladen und zeigt nur die gesammmte Liste an.

Wie kann ich das umgehen das beim Aufrufen der Seite der Kategorie Inhalt nicht geladen wird bevor Abruf passiert?

[AndreasB]

leider keine Konsole im Browser.

Doch, du kannst über remote Debugging (Kommt auf die Plattform an, auf der du programmierst) die Ausgaben deiner Seite auf einem Dektopbrowser sehen.
Schau' dir das mal an, das wird dir sehr helfen.

Was Steckt denn in idx?
Damit await funktioniert, muss in ids ein Promise sein. Ist das so?