Methode die ein Array/Objekt durchläuft - kann man auf jeden Loop zugreifen?

[Rolf B]

Hallo ebody,

oh ja, das ist sehr wild…

Mal unsortiert...

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.

cFeed.template = {
   name:'default',
   title: o => o.Titel,
   item1: o => 'Genre' 
};

und

  readArrObjects(arrObjData){
    
    let generatedTemplate = '';
    
    for(let arrObjDataElement of arrObjData) {
      // Look Ma, it's a one-liner!
      let replacer = 
         (match, p1, offset, string) => 
             p1 in this.objTemplate ? (this.objTemplate[p1])(arrObjDataElement) : `??${p1}??`;
      
      let templateGetData = this.template.child.replace(/%([^%]*)%/g, replacer);
      
      generatedTemplate += templateGetData;

    }
    generatedTemplate = `<${this.template.parent}>${generatedTemplate}</${this.template.parent}>`; 
    this.render(generatedTemplate);
    console.log('generatedTemplate: ',generatedTemplate);
    return generatedTemplate;
  }

Wenn Du hypermodern sein willst, kannst Du den Replacer-Callback mit Hilfe von optional chaining und nullish coalescing so umschreiben:

      let replacer = 
         (match, p1, offset, string) => this.objTemplate[p1]?.(arrObjDataElement) ?? `##${p1}##`

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).

Bevor Du viel weiterexperimentierst - schau Dir einmal knockout.js 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.

Rolf