JSON umwandlung

Hamunsch · 17. Juli 2017

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.

RipperFox · 18. Juli 2017

Das Beispiel in der Doku bringt dich nicht weiter? Warum eval(), wenn Du das korrektere JSON.parse() nutzt?

https://www.w3schools.com/js/js_json_parse.asp

Bearbeitet 18. Juli 2017 von RipperFox

Rienne · 18. Juli 2017

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 · 18. Juli 2017

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 18. Juli 2017 von PVoss

KeeperOfCoffee · 18. Juli 2017

https://stackoverflow.com/questions/18910939/how-to-get-json-key-and-value-in-javascript

Vlt hilft das ja

RipperFox · 18. Juli 2017

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 · 18. Juli 2017

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 · 18. Juli 2017

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 18. Juli 2017 von PVoss

Hamunsch · 18. Juli 2017

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]
    });
  });
});

RipperFox · 18. Juli 2017

vor 13 Minuten schrieb Hamunsch:

alert(inhalt[0]); // erzeugt: [object Object]

Wie sieht's damit aus?

alert(inhalt[0].name);

Hamunsch · 18. Juli 2017

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 · 18. Juli 2017

vor 2 Minuten schrieb RipperFox:

Wie sieht's damit aus?

alert(inhalt[0].name);

"undefined"

RipperFox · 18. Juli 2017

Sorry, Du hast mich irgendwie abgehängt. Wofür brauchst Du das eval() nochmal? Das "result" von JSON.parse() ist doch bereits ein Array mit Objekten.

Hamunsch · 18. Juli 2017

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 · 18. Juli 2017

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 18. Juli 2017 von PVoss

Hamunsch · 18. Juli 2017

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 · 18. Juli 2017

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 18. Juli 2017 von Hamunsch

JimTheLion · 18. Juli 2017

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 18. Juli 2017 von PVoss

Hamunsch · 18. Juli 2017

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

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 · 18. Juli 2017

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 · 19. Juli 2017

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 · 19. Juli 2017

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.

Anmelden

JSON umwandlung

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte