[JS] Problem bei der richtigen Ausgabe

[.MaisKolben™]

Hallo Freunde der Coding Section.

Hier mein Problem:

Ich habe eine for function welche mir Daten aus Json Datenbanken in eine HTML Tabelle optisch ausgibt. Da diese ganzen Json Datenbanken per API aufgerufen werden benötige ich natürlich auch Authentifizierungen mit XMLHttpRequest. Soweit so gut, keine großen Probleme.

Das ganze dient zur einer optischen Ausgabe von Berichten. Die Tabelle besteht somit aus einer Frage und einer Antwort Spalte. Fragen funktionieren Problemlos, bei den Antworten kommen dann aber die Probleme.

So werden Text Antworten mithilfe von for Schleifen ausgeben, genau so wie Auswahl-Antworten (yes, no, partly). Nun scheitert es bei den Bildern.

Ausgegeben bekomme ich in der Antwort-Json nur die guid des Bildes und habe diese dann per API Aufruf in meine Tabelle verfrachtet. Das Problem, dass die ausgegebenen Bilder alle nur bei der letzten Frage statt bei den einzelnen richtigen Fragen ausgegeben werden.

Beispiel im Screenshot:


getImage Function:

function getImage(image){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', + url + 'api/pictures/' + image, true);
        xhr.setRequestHeader('Authorization', getAuthCookie());
        xhr.responseType = 'arraybuffer';

        xhr.onload = function(e) {
            if (this.status == 200) {
                var uInt8Array = new Uint8Array(this.response);
                var i = uInt8Array.length;
                var biStr = new Array(i);
                while (i--)
                { biStr[i] = String.fromCharCode(uInt8Array[i]);
                }
                var data = biStr.join('');
                var base64 = window.btoa(data);

                tr.append('<td><img src="data:image/jpg;base64,' + base64 + '" height="20%" width="20%"/></td>');
            }
        };

        xhr.send();
    }

Aufruf der Function und der gesamte Codeteil:

var tr;

    for (var i = 0; i < obj1.Forms[f].Questions.length; i++) {

        var found = false;

        for(var x = 0; x < obj2.length; x++) {

            if(obj2[x].QuestionID == obj1.Forms[f].Questions[i].QuestionID) {
                tr = $('<tr/>');
                tr.append("<td>" + obj1.Forms[f].Questions[i].Caption + "</td>");
                tr.append("<td>-</td>");

                if(obj2[x].Text != undefined && obj2[x].Text != null) {
                    tr.append("<td>" + obj2[x].Text + "</td>");
                } else if(obj2[x].Choices != undefined && obj2[x].Choices != null) {
                    var choices = "";
                    obj2[x].Choices.forEach(function(e) {
                        obj1.Forms[f].Questions[i].Choices.forEach(function(c) {
                            if(c.ChoiceID == e) {
                                if(choices != "") choices += "<br />";
                                choices += c.Caption;
                            }
                        });
                    });

                    tr.append("<td>" + choices + "</td>");
                } else if(obj2[x].Picture != undefined && obj2[x].Picture != null) {
                    getImage(obj2[x].Picture);
                }

                $('table').append(tr);

                found = true;
                break;
            }
        }

        if(!found) {

            tr = $('<tr/>');
            tr.append("<td>" + obj1.Forms[f].Questions[i].Caption + "</td>");
            tr.append("<td>-</td>");
            tr.append("<td>-</td>");
            $('table').append(tr);
        }
    }

ich bedanke mich für jede Hilfe .

Gruß,
euer MaisKolben

[MrDami123]

'getImage()' führt beim Abschluss 'tr.append()' aus und fügt die Bilder ans letzte 'tr' hinzu.

Wenn du möchtest, dass das Bild in die richtige 'tr' gelangt, sollte 'getImage()' den angefertigten <img> Tag zurückgeben und dann der ausgewählten 'tr' ( tr = $('<tr/>'); ) hinzugefügt werden.

[.MaisKolben™]

Originally Posted by MrDami123

'getImage()' führt beim Abschluss 'tr.append()' aus und fügt die Bilder ans letzte 'tr' hinzu.

Wenn du möchtest, dass das Bild in die richtige 'tr' gelangt, sollte 'getImage()' den angefertigten <img> Tag zurückgeben und dann der ausgewählten 'tr' ( tr = $('<tr/>'); ) hinzugefügt werden.

Klingt plausibel!
Hatte hier wohl den Durchblick verloren. Ich danke dir für deine schnelle Hilfe .

Gruß,
Mais

[MrDami123]

Originally Posted by .MaisKolben™

Klingt plausibel!

Probiers aus.

[.MaisKolben™]

Originally Posted by MrDami123

Probiers aus.

Folgendes Problem besteht nun aktuell:



getImage Function:

function getImage(image){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://teamhaven.com/api/pictures/' + image, true);
        xhr.setRequestHeader('Authorization', getAuthCookie());
        xhr.responseType = 'arraybuffer';

        xhr.onload = function(e) {
            if (this.status == 200) {
                var uInt8Array = new Uint8Array(this.response);
                var i = uInt8Array.length;
                var biStr = new Array(i);
                while (i--)
                { biStr[i] = String.fromCharCode(uInt8Array[i]);
                }
                var data = biStr.join('');
                var base64 = window.btoa(data);

                return base64;
            }
        };

        xhr.send();
    }

Aufruf der Function:

} else if(obj2[x].Picture != undefined && obj2[x].Picture != null) {
                    console.log(getImage(obj2[x].Picture));
                    tr.append('<td><img src="data:image/jpg;base64,' + getImage(obj2[x].Picture) + '" height="20%" width="20%"/></td>');
                }

Würde mich über weitere Hilfe freuen .

Gruß,
Mais

[snow]

#moved…

[.MaisKolben™]

Hat sich erledigt.
Kann geschlossen werden .

MfG

[Menan]

Kleiner Tipp am Rande:

In JS solltest du auf Gleichheit immer mit " === " prüfen und nicht nur mit " == ".