Problem bei der richtigen Ausgabe

11/03/2015 12:34 .MaisKolben™#1
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:
[Only registered and activated users can see links. Click Here To Register...]

getImage Function:
Code:
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:
Code:
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
11/03/2015 23:35 MrDami123#2
'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.
11/04/2015 09:39 .MaisKolben™#3
Quote:
Originally Posted by MrDami123 View Post
'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
11/04/2015 11:51 MrDami123#4
Quote:
Originally Posted by .MaisKolben™ View Post
Klingt plausibel!
Probiers aus.
11/04/2015 13:53 .MaisKolben™#5
Quote:
Originally Posted by MrDami123 View Post
Probiers aus.
Folgendes Problem besteht nun aktuell:

[Only registered and activated users can see links. Click Here To Register...]

getImage Function:

Code:
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:

Code:
} 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
11/05/2015 23:48 snow#6
#moved…
11/17/2015 17:11 .MaisKolben™#7
Hat sich erledigt.
Kann geschlossen werden :).

MfG
11/18/2015 00:06 Menan#8
Kleiner Tipp am Rande:

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