• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] TypeError: function is not a function or its return value is not iterable

trix0

Mitglied
Hallo,

ich bin aktuell dabei, das ich für meine Seite Daten aus meiner Datenbank lese und einfüge. als Backend(für den DB-Zugriff) verwende ich Node.JS um eine API schnittstelle zu haben.

Der Datenbankzugriff funktioniert auch, ich kann mir die Daten per Console.log richtig in json-Format anzeigen.

Die Daten werden per js über eine Funktion mit der Funktion Fetch abgeholt.

Wenn ich nun die Daten brauche (In einer Tabelle soll neben den Kundendaten auch die Anzahl der Projekte/Angebote stehen), erstelle ich die Daten und das Format in einer Function bereit zum übergeben. in dieser Function (getitems) wird mittels foreach schleife das übergebene Array (json Daten der einzelnen Kunden) durchlaufen und dabei soll die Anzahl der Projekte/angebote gezählt werden. Hierfür habe ich eine eigen Function(offers) erstellt, die die Daten mittels API schnittstelle je nach Kunden_ID abruft. wenn ich diese Function jedoch aufrufen will, dann kommt immer die Fehlermeldung
TypeError: offers is not a function or its return value is not iterable

leider finde ich dazu keinen google beitrag, der mir in dieser Situation hilfreich war. die Function offers habe ich von der function test kopiert. Function test funktioniert problemlos.

Javascript:
async function test() {

    await fetch("http://127.0.0.1:8080/api/user")
        .then((response) => {
            response.json().then((data) =>{
                allcustomers(data);
            });
        });


}

async function offers(id){
 
    await fetch("http://127.0.0.1:8080/api/offers/" +id) //Abruf Angebote nach Kunden_ID
    .then((response) => {
            response.json().then((data) =>{
                console.log("funktioniert");
               return(data);
            });
        });
        return [null];
}




function allcustomers(data) {
    let test = document.querySelector("#testrow"); // noch ändern
        const result = getitems(data);
        test.innerHTML = result;

}

function getitems(data){
   
    let result;
    let [count] = offers(1); //testzugriff -> hier bringt er die Fehlermeldung
    console.log(count);

    data.map((item)=>{
       
        result += "<tr><td>" + item.Name + "</td>";
        result += "<td>" + item.Adresse + "</td>";
        result += "<td>" + item.PLZ + "</td></tr>";
 
        });
       
    return result;
}
 
ich habe es gerade gelöst.

da ja die function offers als async ausgeführt wird hat js immer auf eine Rückmeldung gewartet, aber die Function ist einfach weitergelaufen.

deshalb habe ich die function getitems in eine async function geändert. Auch habe ich anstatt data.map, for() verwendet, da ich innerhalb der map function kein await benutzen kann.
 
Du schreibst zwar, dass Du es gelöst hast, aber ich habe da trotzdem zwei Empfehlungen:
  1. Das Ganze nicht so stark mit Funktionen verschachteln.
  2. Konsequent mit "async await" statt "then" arbeiten.
Mediaevent, übrigens auch häufig eine gute Quelle, liefert dafür ein sehr gutes Beispiel:
Dann wird es viel übersichtlicher und besser lesbar:
Code:
        async function getData() {
            try {
                const response = await fetch('deine-url.json');
                const data = await response.json();
                const tablebody = document.querySelector("tbody");

                data.forEach(item => {
                    tablebody.innerHTML += `
                        <tr>
                            <td>${item.Name}</td>
                            <td>${item.Adresse}</td>
                            <td>${item.PLZ}</td>
                        </tr>`;
                });

            } catch (error) {
                console.error('Fehler:', error);
            }
        }
        getData();
 
Zurück
Oben