Wert in data-Attribut – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Wert in data-Attribut Tue, 22 May 18 11:21:26 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722626?srt=yes#m1722626 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722626?srt=yes#m1722626 <p>Hallo Forum,</p> <p>ich muss per JS den Wert aus einem Attribut data-test ersetzen wie folgt ersetzen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>value_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>Das Markup soll also am Ende wie folgt aussehen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>{prop_a:'value_a', prop_b:{prop_b1:'value_b1', prop_b2:'value_b2'}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>Wenn ich das richtig interpretiere, steht in dem Attribut am Ende ein JSON-String oder JSON-Objekt oder ... was genau?</p> <p>Ich denke, ich werde hier nicht einfach einen String zusammenbauen, der zufällig geschweifte Klammern enthält oder?</p> <p>besten dank für tipps und liebe gruesse, heinetz</p> Wert in data-Attribut Tue, 22 May 18 11:29:52 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722627?srt=yes#m1722627 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722627?srt=yes#m1722627 <p>Tach!</p> <blockquote> <p>ich muss per JS den Wert aus einem Attribut data-test ersetzen wie folgt ersetzen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>value_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>Das Markup soll also am Ende wie folgt aussehen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>{prop_a:'value_a', prop_b:{prop_b1:'value_b1', prop_b2:'value_b2'}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>Wenn ich das richtig interpretiere, steht in dem Attribut am Ende ein JSON-String oder JSON-Objekt oder ... was genau?</p> </blockquote> <p>Sieht aus wie JSON (ohne Zusatz). JSON ist immer ein String, der ein serialisiertes Javascript-Objekt darstellt (oder seltener auch simple Werte).</p> <blockquote> <p>Ich denke, ich werde hier nicht einfach einen String zusammenbauen, der zufällig geschweifte Klammern enthält oder?</p> </blockquote> <p>Ja, es gibt bessere Möglichkeiten. Kommt darauf an, was du konkret vorhast. Um ein Objekt zu serialisieren, kannst du unter Javascript JSON.stringify() nehmen.</p> <p>dedlfix.</p> Wert in data-Attribut Tue, 22 May 18 12:13:42 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722631?srt=yes#m1722631 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722631?srt=yes#m1722631 <p>Lieber heinetz,</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>value_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Du willst keine Leerzeichen um das Istgleichzeichen!!</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>Was Deinen Ersatzcode angeht, so sieht er aus wie ein übliches <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte_-_Eigenschaften_und_Methoden#Literale" rel="nofollow noopener noreferrer">Objekt-Literal</a> in JavaScript:</p> <pre><code class="block language-javascript"><span class="token punctuation">{</span><span class="token literal-property property">prop_a</span><span class="token operator">:</span><span class="token string">'value_a'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop_b</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">prop_b1</span><span class="token operator">:</span><span class="token string">'value_b1'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop_b2</span><span class="token operator">:</span><span class="token string">'value_b2'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> </code></pre> <p>Anders formatiert sieht es so aus:</p> <pre><code class="block language-javascript"><span class="token punctuation">{</span> <span class="token literal-property property">prop_a</span><span class="token operator">:</span> <span class="token string">'value_a'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop_b</span><span class="token operator">:</span><span class="token punctuation">{</span> <span class="token literal-property property">prop_b1</span><span class="token operator">:</span> <span class="token string">'value_b1'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop_b2</span><span class="token operator">:</span> <span class="token string">'value_b2'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Um ein solches Objektliteral "einfach" mit JavaScript zu notieren, nützt Dir (wie schon von <a href="/users/27" class="mention registered-user" rel="noopener noreferrer">@dedlfix</a> angemerkt) <code class="language-javascript"><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>.</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">prop_a</span><span class="token operator">:</span><span class="token string">'value_a'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop_b</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">prop_b1</span><span class="token operator">:</span><span class="token string">'value_b1'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop_b2</span><span class="token operator">:</span><span class="token string">'value_b2'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'[data-test="value_a"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fill data-test attribute</span> element<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>test <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> Wert in data-Attribut Tue, 22 May 18 12:49:15 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722637?srt=yes#m1722637 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722637?srt=yes#m1722637 <p>hi,</p> <blockquote> <p>Ich denke, ich werde hier nicht einfach einen String zusammenbauen, der zufällig geschweifte Klammern enthält oder?</p> </blockquote> <p>Würde ich auch nicht machen. Es sei denn der Zufall ist da erwünscht. MfG</p> Wert in data-Attribut Tue, 22 May 18 11:52:59 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722629?srt=yes#m1722629 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722629?srt=yes#m1722629 <p>@@dedlfix</p> <blockquote> <p>Sieht aus wie JSON</p> </blockquote> <p>Nein, ganz und gar nicht.</p> <p>JSON sieht so aus:</p> <pre><code class="block language-json"><span class="token punctuation">{</span><span class="token property">"prop_a"</span><span class="token operator">:</span><span class="token string">"value_a"</span><span class="token punctuation">,</span> <span class="token property">"prop_b"</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token property">"prop_b1"</span><span class="token operator">:</span><span class="token string">"value_b1"</span><span class="token punctuation">,</span> <span class="token property">"prop_b2"</span><span class="token operator">:</span><span class="token string">"value_b2"</span><span class="token punctuation">}</span><span class="token punctuation">}</span> </code></pre> <p>Doppelte „Anführungszeichen“, und das auch links vom Doppelpunkt.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wert in data-Attribut Wed, 23 May 18 07:19:52 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722647?srt=yes#m1722647 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722647?srt=yes#m1722647 <p>Hello,</p> <p>ja, mit JSON.stringify() hatte ich es dann auch gelöst. Allerdings steht in dem Attribut hinterher tatsächlich folgender Wert:</p> <p>{"prop_a":"value_a","prop_b":{"prop_b1":"value_b1","prop_b2":"value_b2"}}</p> <p>JSON.stringify() generiert offenbar doppelte Anführungszeichen. Ich nehme erstmal an, dass das für die Auswertung des Attributs (Tracking-Code) unerheblich ist. Dennoch stellt sich die Frage, ob ich die Möglichkeit habe, auf die Anführungszeichen Einfluss zu nehmen, ohne den String nachträglich mit regulären Ausdrücken zu behandeln.</p> <p>gruss, heinetz</p> Wert in data-Attribut Tue, 22 May 18 14:49:25 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722642?srt=yes#m1722642 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722642?srt=yes#m1722642 <p>Hi,</p> <blockquote> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>value_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Du willst keine Leerzeichen um das Istgleichzeichen!!</p> </blockquote> <p>Doch, offensichtlich will er die, sonst hätte er sie nicht hingemacht.</p> <p>Was stört Dich denn daran? Erlaubt sind sie …</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Wert in data-Attribut Wed, 23 May 18 07:47:59 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722655?srt=yes#m1722655 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722655?srt=yes#m1722655 <p>@@MudGuard</p> <blockquote> <blockquote> <p>Du willst keine Leerzeichen um das Istgleichzeichen!!</p> </blockquote> <p>Doch, offensichtlich will er die, sonst hätte er sie nicht hingemacht.</p> <p>Was stört Dich denn daran? Erlaubt sind sie …</p> </blockquote> <p>Erlaubt ist, was gefällt.</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">data-test</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>value_a<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Link <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>(frei nach <a href="https://de.wikisource.org/wiki/Fisches_Nachtgesang" rel="nofollow noopener noreferrer">Christian Morgenstern</a>)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wert in data-Attribut Wed, 23 May 18 07:30:31 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722650?srt=yes#m1722650 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722650?srt=yes#m1722650 <p>hallo</p> <blockquote> <p>JSON.stringify() generiert offenbar doppelte Anführungszeichen. Ich nehme erstmal an, dass das für die Auswertung des Attributs (Tracking-Code) unerheblich ist.</p> </blockquote> <p>Du solltest aber nicht annehmen, sondern die API konsultieren.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> Wert in data-Attribut Wed, 23 May 18 07:33:37 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722651?srt=yes#m1722651 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722651?srt=yes#m1722651 <p>Hallo heinetz,</p> <blockquote> <p>JSON.stringify() generiert offenbar doppelte Anführungszeichen.</p> </blockquote> <p>Implementation detail. Könnten auch single quotes sein.</p> <blockquote> <p>Dennoch stellt sich die Frage, ob ich die Möglichkeit habe, auf die Anführungszeichen Einfluss zu nehmen,</p> </blockquote> <p>Nicht soweit mir bekannt. Aber <a href="https://wiki.selfhtml.org/wiki/JSON/stringify" rel="nofollow noopener noreferrer">schau dir</a> <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" rel="nofollow noopener noreferrer">die API</a> an.</p> <blockquote> <p>ohne den String nachträglich mit regulären Ausdrücken zu behandeln.</p> </blockquote> <p>Don't… du müsstest auch diverse Fälle mit Escaping abdecken, etwa <code>"\""</code> u.ä. - du begibst dich da auf einen Pfad, der dir Probleme bereiten wird.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Wert in data-Attribut Wed, 23 May 18 08:18:20 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722658?srt=yes#m1722658 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722658?srt=yes#m1722658 <p>Hello,</p> <blockquote> <p>JSON.stringify() generiert offenbar doppelte Anführungszeichen. Ich nehme erstmal an, dass das für die Auswertung des Attributs (Tracking-Code) unerheblich ist. Dennoch stellt sich die Frage, ob ich die Möglichkeit habe, auf die Anführungszeichen Einfluss zu nehmen, ohne den String nachträglich mit regulären Ausdrücken zu behandeln.</p> </blockquote> <p>Gar nichts wirst Du an dem String tun. Wenn der Serializer so arbeitet, dann ist das so. Und wenn der String einen anderen Inhalt transportieren soll, dann wird die Datenstruktur bearbeitet und der String neu erzeugt.</p> <p>Das ist das Prinzip und das funktioniert nur, solange sich alle daran halten.</p> <p>MfG</p> Wert in data-Attribut Wed, 23 May 18 07:35:11 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722652?srt=yes#m1722652 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722652?srt=yes#m1722652 <p>@@Christian Kruse</p> <blockquote> <blockquote> <p>JSON.stringify() generiert offenbar doppelte Anführungszeichen.</p> </blockquote> <p>Implementation detail. Könnten auch single quotes sein.</p> </blockquote> <p>Nein, auf gar keinen Fall. JSON <strong>verlangt</strong> doppelte „Anführungszeichen“. Das sagte ich doch <a href="https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722629#m1722629" rel="noopener noreferrer">bereits</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wert in data-Attribut Wed, 23 May 18 07:35:59 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722653?srt=yes#m1722653 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722653?srt=yes#m1722653 <p>Hallo Gunnar,</p> <p>was möchtest du mir sagen? </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Wert in data-Attribut Wed, 23 May 18 07:37:48 Z https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722654?srt=yes#m1722654 https://forum.selfhtml.org/self/2018/may/22/wert-in-data-attribut/1722654?srt=yes#m1722654 <p>@@Christian Kruse</p> <blockquote> <p>was möchtest du mir sagen? </p> </blockquote> <p>Dass ich meinen Finger auf dem falschen Button hatte. </p> <p>Jetzt editiert.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div>