v3.14.x HTML per API übertragen - parsing Probleme - Bug?

Anonymous · 14. November 2019

3.14.1.0, Theme basiert

Bei der Umsetzung von übertragenem REST API-Code in die Kategorienbeschreibung scheint es ein Umsetzungs/Parsing-Problem zu geben.
Wenn ich folgendes per CopyPaste in den Quellcode der Kategoriebeschreibung packe:
Code:
<div class="row space-1">
<div class="col-xs-12 col-sm-6 space-1">
<img class="img-responsive"src="images/categories/macbook-a1181-2006.jpg"/>
</div>
<div class="col-xs-12 col-sm-6">
MacBook 13“ 2006
    Modell: A1181
    EMC: 2092
    Identifier: MacBook1,1
    CPU: CoreDuo - Speed: 1,83 |  2,0
    Ordernumber: MA254xx/A, MA255xx/A, MA472xx/A
    Configurations: 13"/1.83 GHz/60 GB/Combo | 13"/2 GHz/60 GB/SuperDrive | 13"/2 GHz/80 GB/SuperDrive
</div>
</div>
strukturiert der Editor das schön um in:
Code:
<div class="row space-1">
    <div class="col-xs-12 col-sm-6 space-1">
        <img class="img-responsive" src="images/categories/macbook-a1181-2006.jpg" />
    </div>

    <div class="col-xs-12 col-sm-6">
        MacBook 13&ldquo; 2006 Modell: A1181 EMC: 2092 Identifier: MacBook1,1 CPU: CoreDuo - Speed: 1,83 | 2,0 Ordernumber: MA254xx/A, MA255xx/A, MA472xx/A Configurations: 13&quot;/1.83 GHz/60 GB/Combo | 13&quot;/2 GHz/60 GB/SuperDrive | 13&quot;/2 GHz/80 GB/SuperDrive
    </div>
</div>
Wenn ich das selbe per REST API übertrage im entsprechenden Format übertrage, bekomme ich als Response (englischen Teil weggelassen):
Code:
   "description": {
        "de": "<div class=''row space-1''><div class=''col-xs-12 col-sm-6 space-1''><img class=''img-responsive'' src=''images/categories/macbook-a1181-2006.jpg''/></div><div class=''col-xs-12 col-sm-6''>MacBook 13\u201c 2006<br>    Modell: A1181<br>    EMC: 2092<br>    Identifier: MacBook1,1<br>    CPU: CoreDuo - Speed: 1,83 |  2,0<br>    Ordernumber: MA254xx/A, MA255xx/A, MA472xx/A<br>    Configurations: 13''/1.83 GHz/60 GB/Combo | 13''/2 GHz/60 GB/SuperDrive | 13''/2 GHz/80 GB/SuperDrive</div></div>"
    },
Das sieht ja eigentlich ganz gut aus.
Aber im Editor landet dann folgendes:
Code:
<div row="" space-1="">
    <div col-sm-6="" col-xs-12="" space-1="">
        <img img-responsive="" />
    </div>

    <div col-sm-6="" col-xs-12="">
        MacBook 13&ldquo; 2006<br />
        Modell: A1181<br />
        EMC: 2092<br />
        Identifier: MacBook1,1<br />
        CPU: CoreDuo - Speed: 1,83 | 2,0<br />
        Ordernumber: MA254xx/A, MA255xx/A, MA472xx/A<br />
        Configurations: 13&#39;&#39;/1.83 GHz/60 GB/Combo | 13&#39;&#39;/2 GHz/60 GB/SuperDrive | 13&#39;&#39;/2 GHz/80 GB/SuperDrive
    </div>
</div>
Da fehlt also so einiges.
Aus
<div class=''col-xs-12 col-sm-6 space-1''>
wird dann
<div row="" space-1=""><div col-sm-6="" col-xs-12="" space-1="">

und aus
<img class=''img-responsive'' src=''images/categories/macbook-a1181-2006.jpg''/>
macht er
<img img-responsive="" />
das src-tag fehlt komplett, keine Bildverlinkung....

Warum?
Denkfehler meinerseits oder Bug?
Warum ist die Response der API korrekt, das Parsing aber anders und damit unbrauchbar?

Anonymous · 14. November 2019

Ah, jetzt wo ich den fertigen Post hier sehe (anderer Schriftsatz...) erkenne ich in der API Respnse ein Problem mit Anführungszeichen! Ich muss meinen Quellcode noch mal nach den verschiedenen Varianten die es bei Anführungszeichen gibt prüfen, evtl. kommt das Ganze da her.... Moment noch Vielleicht liegt der Fehler doch bei mir

Anonymous · 14. November 2019

Ich muss jetzt kurz weg, aber kann es sein, dass man für die Übertragung per API die Anführungszeichen einfach weglassen muss? Zumindest wenn ich direkt im Editor
<img class= img-responsive src= images/categories/macbook-a1181-2006.jpg />
einfüge, kommt das korrekte
<img class="img-responsive" src="images/categories/macbook-a1181-2006.jpg" />
heraus, mit der API hab ich es noch nicht probiert.
Oder gibt es hier spezielle Richtlinien wie was HTML mässiges per API übertragen werden muss?

Anonymous · 14. November 2019

Wie machst du das Encoding des JSON-Payloads? An der Stelle könnte etwas schieflaufen.

Schnelles Beispiel im interaktiven PHP-Modus:
Code:
php > $data = ['id' => 42, 'html' => '<div class="foo bar" title="just a test">lorem ipsum</div>'];
php > $json = json_encode($data);
php > echo $json;
{"id":42,"html":"<div class=\"foo bar\" title=\"just a test\">lorem ipsum<\/div>"}
Also, im JSON müssen die Anführungszeichen escaped sein; json_encode() macht das aber vollautomagisch.

Anonymous · 14. November 2019

Ich schiebe das Ganze über FileMaker Pro (Mac) über die dortige API Schnittstelle rüber. Ein typischer Data-Block wäre hier:
Code:
"{ \"parentId\": 3, \"isActive\": true, \"name\": {\"en\": \"MacBook A1181 2006 EMC 2092\", \"de\": \"MacBook A1181 2006 EMC 2092\"} , \"headingTitle\": {\"en\": \"MacBook A1181 2006\", \"de\": \"MacBook A1181 2006\"} , \"description\": {\"en\": \"MacBook 13“ 2006<br>    Modell: A1181<br>    EMC: 2092<br>    Identifier: MacBook1,1<br>    CPU: CoreDuo - Speed: 1,83 |  2,0<br>    Ordernumber: MA254xx/A, MA255xx/A, MA472xx/A<br>    Configurations: 13''/1.83 GHz/60 GB/Combo | 13''/2 GHz/60 GB/SuperDrive | 13''/2 GHz/80 GB/SuperDrive\", \"de\": \"<div class=row space-1><div class=col-xs-12 col-sm-6 space-1><img class=img-responsive src= images/categories/macbook-a1181-2006.jpg/></div><div class=col-xs-12 col-sm-6>MacBook 13“ 2006<br>    Modell: A1181<br>    EMC: 2092<br>    Identifier: MacBook1,1<br>    CPU: CoreDuo - Speed: 1,83 |  2,0<br>    Ordernumber: MA254xx/A, MA255xx/A, MA472xx/A<br>    Configurations: 13''/1.83 GHz/60 GB/Combo | 13''/2 GHz/60 GB/SuperDrive | 13''/2 GHz/80 GB/SuperDrive</div></div>\"} , \"imageAltText\": {\"en\": \"MacBook A1181 2006 EMC 2092 white and black\", \"de\": \"MacBook A1181 2006 EMC 2092 in weiss und schwarz\"} , \"image\": \"macbook-a1181-2006.jpg\" ,\"settings\": { \"showCategoriesImageInDescription\": true, \"showSubCategories\": true, \"showSubCategoryImages\": true, \"showSubCategoryNames\": true, \"showSubCategoryProducts\": false}}"
Da habe ich nun natürlich das Problem, dass ich alle Strings so verpacken muss: \"description\".
Wenn ich nun aber im Text Anführungszeichen habe.... :-( wird es wohl kompliziert.
Mir fällt grade spontan nichts ein, wie ich Anführungszeichen noch schreiben sollte, damit sie nicht mit der Struktur kollidieren.

Zitat von Anonymous: ↑

im JSON müssen die Anführungszeichen escaped sein
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Kannst Du mir das näher erläutern? Ich kann damit spontan nix anfangen Ausser du meinst \" - ja, das mache ich ja, kollidiert aber eben damit dass ich auch die im Datablock nötigen Anführungstrichelchen auch schon mit \" codieren muss...

Anonymous · 14. November 2019

Also wenn ich das Ganze so übertrage:
<div class=row space-1><div class=col-xs-12 col-sm-6 space-1><img class=img-responsive src=images/categories/macbook-a1181-2006.jpg>

muss ich das so verpacken:
\"<div class=row space-1><div class=col-xs-12 col-sm-6 space-1><img class=img-responsive src=images/categories/macbook-a1181-2006.jpg>\"

Kommt das an:
<div class="row" space-1="">
<div class="col-xs-12" col-sm-6="" space-1="">
<img class="img-responsive" src="images/categories/macbook-a1181-2006.jpg" />
</div>

Passt nicht wirklich....

Wenn ich Anführungszeichen nutze die ich mit \" schreibe, schicke ich also das:
<div class=\"row space-1\"><div class=\"col-xs-12 col-sm-6 space-1\"><img class=\"img-responsive\" src=\"images/categories/macbook-a1181-2006.jpg\">

ist das ja so verpackt:
\"<div class=''row space-1''><div class=''col-xs-12 col-sm-6 space-1''><img class=''img-responsive'' src=''images/categories/''macbook-a1181-2006.jpg>\"

kommt das an:
<div row="" space-1="">
<div col-sm-6="" col-xs-12="" space-1="">
<img img-responsive="" />
</div>

Wie also könnte ich das
"description" : {"de" : "<div class="row space-1">"}

noch codieren, dass es über die API richtig interpretiert wird? Ein \\\" hilft nix, da heben sich die beiden ersten backslashes ja auf. Ein \\" geht auch nicht.

Anonymous · 14. November 2019

Es scheint zu funktionieren, wenn ich die " innerhalb der Texte durch &quot ersetze... muss ich mal noch weiter austesten....

Anonymous · 15. November 2019

Jetzt muss ich noch mal drauf rumreiten, weil es wohl irgendwie doch nicht genau so läuft wie vorgesehen....

Der Datenblock für das Bild innerhalb der Kategoriebeschreibung wird nun so übertragen:
Code:
<img class=&quot;img-responsive&quot; src=&quot;images/categories/macbook-a1181-2006.jpg&quot;>
Das sollte ja dann im Shop die folgende Zeile ergeben:
Code:
<img class="img-responsive" src="images/categories/macbook-a1181-2006.jpg">
Wenn ich direkt nach der API Übertragung die Kategorie aufrufe, wird das Bild nicht angezeigt, der Pfad des Bilders wird im Browser als
Code:
http://test.realrecyclers.com/de/%22images/categories/macbook-a1181-2006.jpg%22
Was natürlich nicht klappen kann, die %22 in der URL Codierung entspricht den ".
Wenn ich nun im Backend in die Kategorie schaue, steht da aber korrekt
Code:
<img class="img-responsive" src="images/categories/macbook-a1181-2006.jpg">
das Bild wird im Backend auch korrekt gezeigt.
Wenn ich nach dem Übertragen der Daten (Bild wird nicht angezeigt wegen falscher URL mit %22 drin) nun einfach die Kategorie im Backend aufrufe und wieder speichere ohne irgendwo reinzuklicken - dann passt alles.

Direkt nach der Übrtragung ist im Backend als Ergebnis bei der Beschreibung im Quelltext folgendes zu lesen:
Code:
<div class="row space-1">
    <div class="col-xs-12 col-sm-4 space-1">
        <img class="img-responsive" src="images/categories/macbook-a1181-2006.jpg" />
    </div>

    <div class="col-xs-12 col-sm-8">
        MacBook 13&ldquo; 2006<br />
        Modell: A1181<br />
        EMC: 2092<br />
        Identifier: MacBook1,1<br />
        CPU: CoreDuo - Speed: 1,83 | 2,0<br />
        Ordernumber: MA254xx/A, MA255xx/A, MA472xx/A<br />
        Configurations: 13&quot;/1.83 GHz/60 GB/Combo | 13&quot;/2 GHz/60 GB/SuperDrive | 13&quot;/2 GHz/80 GB/SuperDrive
    </div>
</div>
Das passt ja eigentlich alles. Speichere ich nach dem überprüfen das Ganze NICHT bleibt das Bild unauffindbar wegn der %22 in der URL, speichere ich das Ganze aber im Backend, passt es.
Das macht mich fast ein wenig irre... Warum ist das so???

Anonymous · 15. November 2019

Das ist ganz einfach: Der Inhalt wird in den ckEditor geladen. Der hat eingebaute Korrekturfunktionen, die versuchen Code zu reparieren. Du klickst auf speichern, der ändert die Kodierung nach seinem Gusto, es steht was anderes in der Datenbank als zuvor.

Was du nicht zeigst: Du zeigst nirgends wie du deine Daten in JSON konvertierst, die du dann an die API schickst. Korrektes Encoding ist aber Pflichtprogram, sonst tut das nicht, und niemand sieht warum. Es gibt soviele Arten ein Gäsenfüsschen zu codieren, dass niemand weiss was du da wirklich sendest.

Anonymous · 15. November 2019

Ich habe den Data-Block jetzt mal auf das Nötigste reduziert und das Ganze mit den Gambio Testshops (shop1) ausprobiert, komme aber echt nicht weiter....
Ich schicke nun als DATA Block folgendes:
Code:
"{ \"description\": {\"en\": \"\", \"de\": \"<img class=&quot;img-responsive&quot; src=&quot;http://test.realrecyclers.com/images/categories/macbook-a1181-2006.jpg&quot;></div>\"}}"
Die Response sieht ja soweit auch gut aus, denke ich.
Code:
 "description": {
        "en": "",
        "de": "<img class=&quot;img-responsive&quot; src=&quot;http://test.realrecyclers.com/images/categories/macbook-a1181-2006.jpg&quot;></div>"
    },
Die Frage wäre nun eben: Wenn ich das " an sich nicht mitschicken kann, ein \" auch nicht geht, da das ja in den Data-Blöcken für die Anführungsstrichelchen genutzt wird, die die Strings "einrahmen", und ein " anscheinend auch nicht zum Ziel führt: Wie soll ich denn die " korrekt kodieren?

Als header steht übrigens dieses vorne dran:
Code:
--request PUT --user admin@shop.de:12345 --header \"content-type: application/json\" --data 

Anonymous · 15. November 2019

Ich habe es übrigens auch schon mit \\\", also Triple-Escape probiert, dann wir das Bild interessanterweise angezeigt, im ckEditor ist es dann aber weg, der interpretiert
Code:
"{ \"description\": {\"en\": \"\", \"de\": \"<img class=\\\"img-responsive\\\"; src=\\\"http://test.realrecyclers.com/images/categories/macbook-a1181-2006.jpg\\\"></div>\"}}"
dann als
Code:
<img class="img-responsive" />

Anonymous · 15. November 2019

Anders gefragt: Wie wäre denn der korrekte Syntax für den data-block, wenn man z.B in jQuery oder C# folgendes übertragen will:

"description": "<div><img class="img-responsive"; src="bild.jpg"></div> "

In jQuery oder Java Unirest oder Java OkHttp oder C# etc. müssen die Anführungszeichen ja auch escaped übermittelt werden.
Lt. Gambio REST API Dokumentation sieht das grundsätzlich auch so aus:

"data": "[{\"description\":"XXXXXXXXX"}]"

Wie muss nun das XXXXXXXX aussehen, wenn da <div><img class="img-responsive"; src="bild.jpg"></div> stehen soll???

Anonymous · 16. November 2019

Nach vielen vielen Tests ist nir nun ein Datenformat gelungen, das die Daten korrekt überträgt. Der versteckte Hinweis von Wilken, dass die Daten über die API direkt in der Datenbank landen und erst dann z.B. vom ckEditor interpretiert haben, haben mir erleichtert ein paar weitere Tests zu fahren (ich konnte dann immer direkt nach dem API Aufruf in der SQL nachsehen, was rüberkam).
Ich musste die Daten nun so vorbereiten, dass " per Triple-escape \\\" dargestellt und in FileMaker beim CURL-Aufruf nicht direkt sondern per Variable übertragen werden - kleines aber feines Detail....

Wenn also jemand mal auf dieses Thema stösst und mit FileMaker die Gambio REST-API bedienen möchte: Ich bin für Fragen und Hilfe offen

Foren

v3.14.x HTML per API übertragen - parsing Probleme - Bug?

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

Anonymous Erfahrener Benutzer
Mitarbeiter

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

Wilken (Gambio) Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

v3.14.x HTML per API übertragen - parsing Probleme - Bug?

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

Anonymous Erfahrener Benutzer Mitarbeiter

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

Wilken (Gambio) Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

markus_wick Erfahrener Benutzer

Anonymous Erfahrener Benutzer
Mitarbeiter