Zum Inhalt springen

JSON umwandlung

Hamunsch
 Teilen

Empfohlene Beiträge

Hamunsch

Hamunsch

Geschrieben
Geschrieben

Hallo zusammen.

Ich arbeite jetzt schon stundenlang an einer JS-Problematik herum und finde meinen Denkfehler nicht. Ich habe die Hoffnung, dass mir hier jemand helfen kann.

Ich habe ein Formular per serializeArray an PHP übertragen und in eine mySQLDB übertragen.
Der Eintrag in der DB, Varchar, sieht so aus:
  

[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]

Diesen Beitrag möchte ich nun wieder auslesen und das klappt nicht wie ich es mir vorstelle.

Ich öffne per JQuery.post AJAX die PHP-Datei und lese den DB-Eintrag aus und wandle die empfangenen daten mit JSON.parse um.
Soweit so gut. Die Ausgabe der Daten per ALert sehen dann genauso aus wie oben in der DB: 

[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]

Ich kann aber nicht auf die einzelnen Elemente zugreifen. Speziell möchte ich den Eintrag der "zeile2" auslesen.

Wandle ich das Ergebnis jetzt mit eval() um, erhalte ich 

[object Object],[object Object],[object Object],[object Object]

und dann komme ich nicht mehr weiter.. Das Objekt als Array ansprechen mit [0] oder ["zeile2"] bringt nur ein "undefined" heraus.

Hat jemand einen Tip für mich? Ich glaube die Lösung liegt so nahe, ich sehe sie nur nicht.


 

Rienne

Rienne

Geschrieben
Geschrieben
vor 1 Minute schrieb RipperFox:

benutze JSON.parse()

Hat er das nicht?

vor 14 Stunden schrieb Hamunsch:

Ich öffne per JQuery.post AJAX die PHP-Datei und lese den DB-Eintrag aus und wandle die empfangenen daten mit JSON.parse um

 

JimTheLion

JimTheLion

Geschrieben
Geschrieben (bearbeitet)

Hallo,

gibst du bei der post() Funktion schon den Datentyp mit an?

Hab mal dein Beispiel nachgestellt.

Ohne Angabe des Datentyps musst du JSON.parse() nutzen um mit den Daten zu arbeiten 

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
        <script>
            jQuery(document).ready(function () {

                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            console.log(JSON.parse(data)[0].name);
                            JSON.parse(data).map(function(entry) {
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        }
                    );
                });
            });
        </script>
        <div>
            <p>
                <button id="test">Test</button>
            </p>
            <p id="entries"></p>
        </div>
    </body>
</html>

Mit Angabe des Datentyps nicht: 

                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            console.log(data[0].name);
                            data.map(function(entry) {
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        },
                        'json'
                    );
                });

 

 

Bearbeitet von PVoss
RipperFox

RipperFox

Geschrieben
Geschrieben

Klappt eigentlich: 

data = '[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]';
obj = JSON.parse(data);
for (var element=0; element < obj.length; element++) {
      document.write(obj[element].name + ' '  +  obj[element].value + '<br />');
}

 

Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben

Ja, in der Theorie sollte es auch klappen. Scheint ja alles korrekt zu sein. Ich vermute mal, der Fehler liegt an einer anderen Stelle, gar nicht in der Nähe dieses Codes. Aber ich finde keinen ofeensichtlichen Zusammenhang.
Wenn ich es auf diese Weise versuche bekomme ich immer ein "undefined" anstelle des Wertes. Das verwundert mich ja gerade.

Hier mal meine benutzte Funktion:

  

$(document).on("click", ".BTartikel", function(){
	$.post('controllers/artikelQuery.php', {action: "loadArtikelwahl"}, function(result){
		result = JSON.parse(result);
		result.forEach(function(s,i,o){
			inhalt = eval(s[1])  // [1] ist der Teil mit dem Inhalt, [0] ist die ID des Tabelleneintrags
			alert(inhalt[0][0]); // erzeugt:  "undefined"
			alert(inhalt[0]); // erzeugt:  [object Object]
			alert(inhalt); // erzeugt: [object Object],[object Object],[object Object],[object Object],[object Object]
		});
	});
});

 

Zu deiner Antwort weiter oben: Ich hatte neben eval übrigens auch schon JSON.parse getestet. mit dem selben Ergebnis.

 

JimTheLion

JimTheLion

Geschrieben
Geschrieben (bearbeitet)

Du nimmst das Ergebnis falsch auseinander. Sieh dir mal mein Beispiel an.

Das .map() kannst du auch durch .forEach ersetzen.

Zitat 

// [1] ist der Teil mit dem Inhalt, [0] ist die ID des Tabelleneintrags

Also sieht das Ergebnis von Request anders aus, als das json im Startpost?

Bearbeitet von PVoss
Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben

mit $.parseJSON kommt das Selbe heraus: 

 $(document).on("click", ".BTartikel", function(){
  $.post('controllers/artikelQuery.php', {action: "loadArtikelwahl"}, function(result){
    result = $.parseJSON(result);
    result.forEach(function(s,i,o){
      inhalt = eval(s[1])  // [1] ist der Teil mit dem Inhalt, [0] ist die ID des Tabelleneintrags
      alert(inhalt['zeile2']); // erzeugt:  "undefined"
      alert(inhalt[0]['zeile2']); // erzeugt:  "undefined"
    alert(inhalt); // erzeugt: [object Object],[object Object],[object Object],[object Object],[object Object]
    });
  });
});

 

Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben
vor 10 Minuten schrieb PVoss:

Du nimmst das Ergebnis falsch auseinander. Sieh dir mal mein Beispiel an.

Das .map() kannst du auch durch .forEach ersetzen.

Also sieht das Ergebnis von Request anders aus, als das json im Startpost?

Das Request sieht zuerst so aus: 

55,[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]

Die ID kann ich mit [0] ja entfernen und den Inhalt mit[1].

aber dann ging es eben nicht weiter. Ich schaue mir dein Beispiel nochmal an und baue das nach.

Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben
vor 54 Minuten schrieb PVoss:

Hallo,

gibst du bei der post() Funktion schon den Datentyp mit an?

Hab mal dein Beispiel nachgestellt.

Ohne Angabe des Datentyps musst du JSON.parse() nutzen um mit den Daten zu arbeiten 


<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
        <script>
            jQuery(document).ready(function () {

                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            console.log(JSON.parse(data)[0].name);
                            JSON.parse(data).map(function(entry) {
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        }
                    );
                });
            });
        </script>
        <div>
            <p>
                <button id="test">Test</button>
            </p>
            <p id="entries"></p>
        </div>
    </body>
</html>

Mit Angabe des Datentyps nicht: 


                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            console.log(data[0].name);
                            data.map(function(entry) {
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        },
                        'json'
                    );
                });

 

 

Wo wird denn im Beispiel der Datentyp mit angegeben? Ausser dem JSON.parse sehe ich jetzt gerade keinen Unterschied.

Ich versuche es mal mit dataType:json
 

JimTheLion

JimTheLion

Geschrieben
Geschrieben (bearbeitet)
vor 11 Minuten schrieb Hamunsch:

Das Request sieht zuerst so aus: 


55,[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]

 

Fehlt da ein Paar eckiger Klammern? "[55,[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]]"

Dann wäre das hier passend: 

            jQuery(document).ready(function () {

                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            data[1].forEach(function(entry, i, o) {
                              	alert(entry.name);
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        },
                        'json'
                    );
                });
            });
Zitat

Wo wird denn im Beispiel der Datentyp mit angegeben?

Im zweiten Codeschnipsel wird "json" als 4. Parameter an die post() Funktion gegeben.

Bearbeitet von PVoss
Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben

Der String in der Datenbank, in der Tabelle ist ja ebenfalls ein JSON-String.
Lese ich nun per PHP die ganze Tabelle aus, erhalte ich ja ein Ergebnis, das ich, um es per ajax wieder an die aufrufende Webseite übergeben will, wieder mit json_encode formatiere.

Somit habe ich einen JSON-String, der wiederum einen JSON-String (Der inhalt des Tabellen-Feldes) enthält. Ein JSON innerhalb des JSON also.

Wieder im Javascript/Jquery angekommen löse ich den übergebenen JSON-String mit parse auf. Ich erhalte ein Array, dessen 2. Position wiederum ein JSON-String ist.

Also muss ich dieses Arra-Element ja erneut "dekodieren", also erneut JSON.parse.

Die Anzahl der Elemente, di ich in der Tabelle unter "Inhalt" speichere, sind dynamisch, daher habe ich den JSON-String dorthin gespeichert.

Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben (bearbeitet)
vor 14 Minuten schrieb PVoss:

Fehlt da ein Paar eckiger Klammern? "[55,[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]]"

Dann wäre das hier passend: 


            jQuery(document).ready(function () {

                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            data[1].forEach(function(entry, i, o) {
                              	alert(entry.name);
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        },
                        'json'
                    );
                });
            });

Im zweiten Codeschnipsel wird "json" als 4. Parameter an die post() Funktion gegeben.

nein, da sind keine Klammern. es kommt direkt die 55

 

 

Den 4. Parameter habe ich echt übersehen.
OK habe den Datentyp mal eingesetzt:

EDIT"Falscher Code", habs korrigiert 

$(document).on("click", ".BTartikel", function(){
                    $.post(
                        'controllers/artikelQuery.php',
                         {action: "loadArtikelwahl"},
                         function(result){

                            result.forEach(function(s,i,o){
                               inhalt = s[1]  // [1] ist der Teil mit dem Inhalt, [0] ist die ID des Tabelleneintrags
                            alert(inhalt);
                            });
                        }, 'json'
                    );
                });

es kommt in Firebug folgende Fehlermeldung: 

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 3 of the JSON data

 

 

Bearbeitet von Hamunsch
JimTheLion

JimTheLion

Geschrieben
Geschrieben (bearbeitet)

Hm.

Ich würde es mir einfacher machen. 

<?php
$someId = 55;
$jsonStringFromDb = '[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]';
echo json_encode(
    [
        $someId,
        json_decode($jsonStringFromDb)
    ]
);

Damit hast du dann einmal das ganze Ding in json formatiert und hast es beim Client einfach.

 

edit:

So wäre das mit zweiter Codierung. Aber ich habe keine Ahnung wie du die 55 außerhalb des Array hinbekommst^^' 

                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            var inhalt = JSON.parse(data);
                            JSON.parse(inhalt[1]).forEach(function(entry) {
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        }
                    );
                });

 

Bearbeitet von PVoss
Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben

Erstmal vielen Dank für die bisherige Hilfe an alle.
Sry fürs Durcheinander.. auf mehrere Antworten zu antworten, wenn schon wieder neue Antworten kommen artet in Chaos aus :D

Ich schaue mir eure Beispiele (Danke für diese) jetzt nochmal an und teste sie aus und gehe auch euren Links mal nach.
Ich melde mich danach dann nochmal.

 

Hamunsch

Hamunsch

Geschrieben
  • Autor
Geschrieben
vor 23 Minuten schrieb PVoss:

Hm.

Ich würde es mir einfacher machen. 


<?php
$someId = 55;
$jsonStringFromDb = '[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]';
echo json_encode(
    [
        $someId,
        json_decode($jsonStringFromDb)
    ]
);

Damit hast du dann einmal das ganze Ding in json formatiert und hast es beim Client einfach.

 

edit:

So wäre das mit zweiter Codierung. Aber ich habe keine Ahnung wie du die 55 außerhalb des Array hinbekommst^^' 


                jQuery('#test').on('click', function () {
                    jQuery.post(
                        'json.php', 
                        '', 
                        function(data){
                            var inhalt = JSON.parse(data);
                            JSON.parse(inhalt[1]).forEach(function(entry) {
                                jQuery('#entries').append('<label>' + entry.name + '</label> <span>' + entry.value + '</span><br />');
                            });
                        }
                    );
                });

 

Jahaa.. aber ... ;)...

Aus der Datenbank erhalte ich leider nicht nur eine Zeile, sondern mehrere Treffer.


Mit folgendem Code habe ich es jetzt geschafft:

  

$(document).on("click", ".BTartikel", function(){
  $.post(
    'controllers/artikelQuery.php',
    {action: "loadArtikelwahl"},
    function(result){
      result.forEach(function(entry){
		inhalt = eval(entry[0])
		alert(inhalt[1].value);
	  });
    }, 'json'
  );
});

 

JimTheLion

JimTheLion

Geschrieben
Geschrieben
vor 23 Stunden schrieb Hamunsch:

Aus der Datenbank erhalte ich leider nicht nur eine Zeile, sondern mehrere Treffer.

Das sind Informationen die die Helfer brauchen.

Am Anfang hies es deine Schnittstelle gibt sowas zurück: 

[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]

Dann wurde daraus das hier: 

55,[{"name":"zeile1","value":""},{"name":"zeile2","value":"Produktname"},{"name":"zeile3","value":"Produktbeschreibung"},{"name":"menge1","value":"Anzahl"}]

Und jetzt, am Ende, ist es tatsächlich doch nochmal anders^^'

Wenn du gleich gesagt hättest wie die Daten tatsächlich aussehen, hätten wir keine 18 Posts in diesem Thread gebraucht. Bei der Datenverarbeitung ist die Struktur der Daten wichtig.

Memento

Memento

Geschrieben
Geschrieben

Mit Bezug auf deinen anderen Thread habe ich hier auch mal reingeschaut..

Dein erster Fehler ist, dass du die Ausgabe deines Resultats mit alert() überprüftst.

Ein Alert wird dir ein Objekt immer als [object Object] darstellen. Alert() kann nämlich nur Strings, bzw. wandelt die Eingabe in einen String um. Und die String-Darstellung eines Objekts ist nunmal [object Object] - also alles richtig gemacht.

Schau mal hier: https://developer.mozilla.org/de/docs/Web/API/Window/alert

Bitte nutze zum debuggen oder prüfen von Werten keine alerts, sondern - wenn es sein muss - ein console.log() - das kann nämlich auch Datentypen darstellen. Dazu muss jedoch die Entwicklerkonsole deines Browsers aktiviert sein. Über die Netzwerkanalyse (bei FireFox, andere Browser benennen den Tab ggf. anders) kannst du dir auch Request & Response deines Posts anschauen, ohne console.log() oder alert() zu nutzen.

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...