tag:forum.selfhtml.org,2005:/self Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? – SELFHTML-Forum 2021-12-04T16:54:27Z https://forum.selfhtml.org/self/2021/dec/02/methode-die-ein-array-objekt-durchlauft-kann-man-auf-jeden-loop-zugreifen/1794174#m1794174 ebody 2021-12-02T11:44:32Z 2021-12-02T11:44:32Z Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? <p>Hallo,</p> <p>Beispiel:</p> <p>Diese eine Zeile würde ein Array durchlaufen und jedes Element mit einem p Tag drum rum in einem Array speichern.</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> domArrValues <span class="token operator">=</span> arrMovies<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">arrElement</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>arrElement<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Wenn man diese Zeile ausführlicher darstellt sieht man noch deutlicher, dass man auf jeden Loop reagieren kann. Man könnte eine Funktion aufrufen etc.</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> domArrValues <span class="token operator">=</span> arrMovies<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">arrElement</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>arrElement<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Wenn man eine Methode hat, die ein Array und/oder Objekt durchläuft, kann man dann auch auf jeden Loop zugreifen?</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> objFilter <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">Genres</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Action'</span><span class="token punctuation">,</span> <span class="token string">'Adventure'</span><span class="token punctuation">,</span> <span class="token string">'Drama'</span><span class="token punctuation">,</span> <span class="token string">'Fantasy'</span><span class="token punctuation">,</span> <span class="token string">'Science-Fiction'</span><span class="token punctuation">,</span> <span class="token string">'Superheroes'</span><span class="token punctuation">,</span> <span class="token string">'Thriller'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">Tags</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Batman'</span><span class="token punctuation">,</span> <span class="token string">'Comic'</span><span class="token punctuation">,</span> <span class="token string">'Favorite'</span><span class="token punctuation">,</span> <span class="token string">'Marvel'</span><span class="token punctuation">,</span> <span class="token string">'New York'</span><span class="token punctuation">,</span> <span class="token string">'Space'</span><span class="token punctuation">,</span> <span class="token string">'War'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Data</span><span class="token punctuation">{</span> <span class="token function">loopObjArrData</span><span class="token punctuation">(</span><span class="token parameter">objData</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> ObjKey <span class="token keyword">in</span> objData<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> ObjKey<span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> arrElement <span class="token keyword">of</span> objData<span class="token punctuation">[</span>ObjKey<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> arrElement<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn ja, wie? Ich habe schon einiges probiert, aber bekomme es nicht hin. U.a. so:</p> <pre><code class="block language-javascript"><span class="token keyword">let</span> movieData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught ReferenceError: Invalid left-hand side in assignment</span> movieData<span class="token punctuation">.</span><span class="token function">loopObjArrData</span><span class="token punctuation">(</span><span class="token punctuation">(</span>objFilter<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2021/dec/02/methode-die-ein-array-objekt-durchlauft-kann-man-auf-jeden-loop-zugreifen/1794176#m1794176 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-12-02T12:45:23Z 2021-12-02T12:45:23Z Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? <p>@@ebody</p> <blockquote> <p>Wenn man eine Methode hat, die ein Array und/oder Objekt durchläuft, kann man dann auch auf jeden Loop zugreifen?</p> </blockquote> <p><code class="language-js"><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code>?</p> <p>☞ <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="nofollow noopener noreferrer">MDN</a></p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/dec/02/methode-die-ein-array-objekt-durchlauft-kann-man-auf-jeden-loop-zugreifen/1794177#m1794177 Rolf B 2021-12-02T12:57:39Z 2021-12-02T12:59:42Z Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? <p>Hallo ebody,</p> <p>Am Rande gefragt: warum ist loopObjArrData Methode einer Klasse? Sie verwendet keine Daten aus dem this-Objekt. Es wäre - je nach Aufgabe der Klasse - zu erwarten, dass entweder das durchlaufene Array oder das Filter-Array unter <code>this</code> zu finden ist.</p> <p>Wenn Du eine Methode oder Funktion hast, die irgendeine Form von Collection durchläuft, und Du ihr etwas mitgeben möchtest, das pro Durchlauf aktiviert wird, benötigst Du einen eigenen Callback, den Du dann selbst aufrufst. Das geht mit einer for..of Schleife so:</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">loopy</span><span class="token punctuation">(</span><span class="token parameter">collection<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> entry <span class="token keyword">of</span> collection<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">callback</span><span class="token punctuation">(</span>entry<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> coll <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"x"</span><span class="token punctuation">,</span> <span class="token string">"y"</span><span class="token punctuation">,</span> <span class="token string">"z"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token function">loopy</span><span class="token punctuation">(</span>coll<span class="token punctuation">,</span> <span class="token parameter">c</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">=</span> Callback als Pfeilfunktion </code></pre> <p>Du kannst eigene Callbacks auch aus einem anderen Callback heraus aufrufen. Funktionen sind Funktionen...</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">gloopy</span><span class="token punctuation">(</span><span class="token parameter">collection<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> collection<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">entry</span> <span class="token operator">=></span> <span class="token function">callback</span><span class="token punctuation">(</span>entry<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> coll <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"x"</span><span class="token punctuation">,</span> <span class="token string">"y"</span><span class="token punctuation">,</span> <span class="token string">"z"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token function">gloopy</span><span class="token punctuation">(</span>coll<span class="token punctuation">,</span> <span class="token parameter">c</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">===</span><span class="token operator">=</span> Callback als Pfeilfunktion </code></pre> <p>Und natürlich spricht auch nichts dagegen, wenn ein Callback einen Wert zurückgibt.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">summeWenn</span><span class="token punctuation">(</span><span class="token parameter">collection<span class="token punctuation">,</span> filterCallback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> summe <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> entry <span class="token keyword">of</span> collection<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">filterCallback</span><span class="token punctuation">(</span>entry<span class="token punctuation">)</span><span class="token punctuation">)</span> summe <span class="token operator">+=</span> entry<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> werte <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">12</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> kleinSum <span class="token operator">=</span> <span class="token function">summeWenn</span><span class="token punctuation">(</span>werte<span class="token punctuation">,</span> <span class="token parameter">w</span> <span class="token operator">=></span> w <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>kleinSum<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15, Summe aller Werte unter 10</span> </code></pre> <p>Eine Pfeilfunktion wie <code>w => w < 10</code>, die hinter dem Pfeil nur einen einzelnen JavaScript-Ausdruck hat und keine geschweiften Klammern, gibt den Wert dieses Ausdrucks zurück. Für diesen Fall also true, wenn w < 10 ist und sonst false.</p> <p>Hat Dir das weitergeholfen?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/dec/02/methode-die-ein-array-objekt-durchlauft-kann-man-auf-jeden-loop-zugreifen/1794178#m1794178 ebody 2021-12-02T13:31:35Z 2021-12-02T13:31:35Z Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? <p>Hallo Rolf,</p> <p>vielen Dank, das hat mir auf jeden Fall sehr weiter geholfen.</p> <pre><code class="block language-javascript"><span class="token keyword">const</span> objFilter <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">Genres</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Action'</span><span class="token punctuation">,</span> <span class="token string">'Adventure'</span><span class="token punctuation">,</span> <span class="token string">'Drama'</span><span class="token punctuation">,</span> <span class="token string">'Fantasy'</span><span class="token punctuation">,</span> <span class="token string">'Science-Fiction'</span><span class="token punctuation">,</span> <span class="token string">'Superheroes'</span><span class="token punctuation">,</span> <span class="token string">'Thriller'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">Tags</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Batman'</span><span class="token punctuation">,</span> <span class="token string">'Comic'</span><span class="token punctuation">,</span> <span class="token string">'Favorite'</span><span class="token punctuation">,</span> <span class="token string">'Marvel'</span><span class="token punctuation">,</span> <span class="token string">'New York'</span><span class="token punctuation">,</span> <span class="token string">'Space'</span><span class="token punctuation">,</span> <span class="token string">'War'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Data</span><span class="token punctuation">{</span> <span class="token function">loopObjArrData</span><span class="token punctuation">(</span><span class="token parameter">objData<span class="token punctuation">,</span>cbKey<span class="token punctuation">,</span>cbArrValue</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> ObjKey <span class="token keyword">in</span> objData<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">cbKey</span><span class="token punctuation">(</span>ObjKey<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> arrElement <span class="token keyword">of</span> objData<span class="token punctuation">[</span>ObjKey<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">cbArrValue</span><span class="token punctuation">(</span>arrElement<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> movieData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> movieData<span class="token punctuation">.</span><span class="token function">loopObjArrData</span><span class="token punctuation">(</span>objFilter<span class="token punctuation">,</span> <span class="token parameter">a</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><h2></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h2></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token parameter">b</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <blockquote> <p>warum ist loopObjArrData Methode einer Klasse?</p> </blockquote> <p>Ich möchte die Methode, die das Array durchläuft in einer Klasse verwenden. Da kommt noch einiges hinzu, daher habe ich sie in diesem Beispiel einfach auch schon in eine Klasse gepackt.</p> <p>Ich versuche gerade Klasse(n) zu schreiben, um HTML Code für bestimmte Komponenten generieren zu lassen. Deren Templates haben Platzhalter. Die Platzhalter sollen mit Keys, deren Werten und/oder Werten aus Arrays ersetzt werden. Welcher Platzhalter mit welchem Wert ersetzt werden soll, kann man über klasseninstanzname.template = {} festgelegt werden.</p> <p>Das ist alles zur Zeit noch im Bau und wild. Weil ich verschiedenes probiere und auskommentiere. <strong>Die Möglichkeit aus dem Beispiel könnte die Sache aber evtl. deutlich einfacher und sauberer gestalten.</strong> <a href="https://codepen.io/ebody/pen/KKXwvXM" rel="noopener noreferrer">https://codepen.io/ebody/pen/KKXwvXM</a></p> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2021/dec/02/methode-die-ein-array-objekt-durchlauft-kann-man-auf-jeden-loop-zugreifen/1794180#m1794180 Rolf B 2021-12-02T21:10:01Z 2021-12-02T21:10:01Z Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? <p>Hallo ebody,</p> <p>oh ja, das ist sehr wild…</p> <p>Mal unsortiert...</p> <p>UIFeed template - der getter liefert ein Objekt für parent- und child-layout, während der setter dazu da ist, eine Art "Konfigurationsobjekt" zu setzen, das (a) angibt, welches der 3 Layouts zu verwenden ist und (b), wie das Mapping von Platzhaltern auf das Datenmodell zu erfolgen hat. Die beiden Dinge haben miteinander nichts zu tun. Eine UiComponent, die ein variables Layout hat, sollte ein Property "layoutType" oder so haben, mit Werten wie 'default' oder 'threeItems'. Wird dieses Property falsch bestückt, ist das Werfen eines Errors durchaus angebracht, das ist ein Programmierfehler und kein Userfehler. Beim Mapping vermengst Du das Symbol aus dem Template mit der Art der Aufbereitung zu einem unheiligen Konglomerat. Als Key hast Du das Templatesymbol, ein _ und dann "key" oder "keyValue". Dein Mapping sollte mit Pfeilfunktionen arbeiten, die für jedes Symbol im Template die Aufbereitung liefern. Der replacePlaceHolder muss auch keine this-Eigenschaft sein, denn er wird pro Schleifendurchlauf neu erzeugt. Das kann eine anonyme Funktion werden.</p> <pre><code class="block language-js">cFeed<span class="token punctuation">.</span>template <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'default'</span><span class="token punctuation">,</span> <span class="token function-variable function">title</span><span class="token operator">:</span> <span class="token parameter">o</span> <span class="token operator">=></span> o<span class="token punctuation">.</span>Titel<span class="token punctuation">,</span> <span class="token function-variable function">item1</span><span class="token operator">:</span> <span class="token parameter">o</span> <span class="token operator">=></span> <span class="token string">'Genre'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>und</p> <pre><code class="block language-js"> <span class="token function">readArrObjects</span><span class="token punctuation">(</span><span class="token parameter">arrObjData</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">let</span> generatedTemplate <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> arrObjDataElement <span class="token keyword">of</span> arrObjData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Look Ma, it's a one-liner!</span> <span class="token keyword">let</span> <span class="token function-variable function">replacer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">match<span class="token punctuation">,</span> p1<span class="token punctuation">,</span> offset<span class="token punctuation">,</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> p1 <span class="token keyword">in</span> <span class="token keyword">this</span><span class="token punctuation">.</span>objTemplate <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>objTemplate<span class="token punctuation">[</span>p1<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">(</span>arrObjDataElement<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">??</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p1<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">??</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token keyword">let</span> templateGetData <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>template<span class="token punctuation">.</span>child<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">%([^%]*)%</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> replacer<span class="token punctuation">)</span><span class="token punctuation">;</span> generatedTemplate <span class="token operator">+=</span> templateGetData<span class="token punctuation">;</span> <span class="token punctuation">}</span> generatedTemplate <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>template<span class="token punctuation">.</span>parent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>generatedTemplate<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>template<span class="token punctuation">.</span>parent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>generatedTemplate<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'generatedTemplate: '</span><span class="token punctuation">,</span>generatedTemplate<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> generatedTemplate<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn Du hypermodern sein willst, kannst Du den Replacer-Callback mit Hilfe von <a href="https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Optional_Chaining_Operator" rel="nofollow noopener noreferrer">optional chaining</a> und <a href="https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Nullish_Coalescing_Operator" rel="nofollow noopener noreferrer">nullish coalescing</a> so umschreiben:</p> <pre><code class="block language-js"> <span class="token keyword">let</span> <span class="token function-variable function">replacer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">match<span class="token punctuation">,</span> p1<span class="token punctuation">,</span> offset<span class="token punctuation">,</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span>objTemplate<span class="token punctuation">[</span>p1<span class="token punctuation">]</span><span class="token operator">?.</span><span class="token punctuation">(</span>arrObjDataElement<span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">##</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p1<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">##</span><span class="token template-punctuation string">`</span></span> </code></pre> <p>Aber das ist nur ein Schritt von vielen. Du bist ja schon darüber gestolpert, dass Du in arrMovies ein Array von Objekten mappen willst, und in objFilter ein Objekt, dessen Properties Werte enthalten. Das arrMovies Array hat einen entscheidenden Designfehler: Es enthält Properties, die eigentlich Arrays sein möchten (Genre, Tags), die Du aber als String mit Komma drin realisiert hast. Ein korrekter Mapper muss das lösen können, und nun bist Du auf dem Weg zum MVVM Prinzip (Model, View, ViewModel).</p> <p>Bevor Du viel weiterexperimentierst - schau Dir einmal <a href="https://knockoutjs.com/" rel="nofollow noopener noreferrer">knockout.js</a> an. Zumindest, um Konzepte kennenzulernen. Ob Du dann bei knockout bleibst, eine andere MVVM Lib suchst oder deine eigene schreiben willst, ist Dir überlassen. Das schöne an knockout ist das Einstiegstutorial, dass dich Schritt für Schritt an die Ideen heranführt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/dec/02/methode-die-ein-array-objekt-durchlauft-kann-man-auf-jeden-loop-zugreifen/1794205#m1794205 ebody 2021-12-04T14:32:12Z 2021-12-04T14:32:12Z Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? <p>Hallo Rolf,</p> <p>vielen Dank für die Tipps. Ich muss das nochmal in Ruhe nachvollziehen. Ich habe es gerade erst gelesen und in der Zwischenzeit weiter dran gearbeitet: <a href="https://codepen.io/ebody/pen/MWEwodg" rel="noopener noreferrer">https://codepen.io/ebody/pen/MWEwodg</a></p> <p><code>arrMovies[]</code> passt so. Das sind Zelleninhalte aus einem Google Sheet. Genre und Tags könnten auch Sätze oder anderes enthalten.</p> <p>Die jeweilige Komponente liefert jeweils ihr eigenes Template/Layout. In dem Beispiel ist es nur eine Komponente. Aber nach dem Prinzip sollen weitere folgen.</p> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2021/dec/02/methode-die-ein-array-objekt-durchlauft-kann-man-auf-jeden-loop-zugreifen/1794208#m1794208 Rolf B 2021-12-04T16:54:27Z 2021-12-04T16:54:27Z Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen? <p>Hallo ebody,</p> <blockquote> <p>arrMovies[] passt so. Das sind Zelleninhalte aus einem Google Sheet. Genre und Tags könnten auch Sätze oder anderes enthalten.</p> </blockquote> <p>Aus meiner Sicht passt das für ein Datenmodell überhaupt nicht. Genres und Tags sind Objekte, die in einer 1:N Beziehung zum Film stehen. Wie willst Du nach Genres filtern, wenn die Genres in einem kommaseparierten String stehen oder dort sogar "Sätze" geschrieben sein könnten? Einen kommaseparierten String kann man, wenn die Daten aus einem Spreadsheet kommen, mit der split-Methode und einer Regex als Delimter aufteilen:</p> <pre><code class="block language-js"><span class="token keyword">let</span> arrGenres <span class="token operator">=</span> genres<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\s*(?:,\s*)+</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span> </code></pre> <p>"Sätze" sollten anderswo stehen. Eine Liste von Genres und Tags passt mit "Sätze" nicht zusammen. Sinnvolle Datenverarbeitung erfordert ein sinnvolles Datenmodell - was Du beschreibst, ist ein Notizzettel, der für einen Menschen problemlos zu verarbeiten ist, für eine Maschine aber kaum bis gar nicht.</p> <blockquote> <p>Die jeweilige Komponente liefert jeweils ihr eigenes Template/Layout.</p> </blockquote> <p>Ein HTML Template im JavaScript, so langsam klingt das nach React (womit ich keine eigene Erfahrung habe) und JSX. Statt Knockout solltest Du Dir vielleicht doch mal den großen Bruder angucken.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>