Angular geschachteltes json-Objekt verändern

[Panda9296]

Hi Leute ich habe 2 Fragen: Die erste Frage bezieht sich auf mein Objekt, dass ich auslesen möchte:

das ist ein einzelnes Objekt(habe viel viel mehr davon ... so das auslesen dieses Objektes klappt super...

//service
getAllCardsFromHttp(topic:string){
    return this.httpClient.get<LearningCard[]>(`${this.ROOT_URL_CARDS}/${topic}`);
  }

// wo ich die daten extraiere: Ich hol mir den key also übergebe ihn der url und hole sie mir
 ngOnInit(): void {
    this.$subscription = this.activatedRoute.queryParams.subscribe(key => {
      this.topicKey = key["topicKey"];
      this.topicService.getAllCardsFromHttp(this.topicKey).subscribe(cards=>{
       this.learningCards=cards["cards"]  //<===========================================
      });
    });
  }

Ich muss quasi dann eine Ebene tiefer zu cards um an das gewünschte Objekt ranzukommen. Wie mache ich das aber wenn ich sie ändern möchte...

damit habe ich es geschafft meine daten komplett zu löschen... klar ich habe das komplette Objekt ersetzt... Ich verstehe nicht was ich hier benötige.. ich brauch doch irgendwas in der url?


======
zweite frage... wenn ich meine Karten anzeige sieht das so aus:

mit ng for durchlaufe ich das array, indem die karten drin sind die ich möchte... aber ich würde gerne das steuern und bekomme das nicht hin, dass nur bei einem click event die nächste karte angezeigt wird(dabei soll natürlich nur eine angezeigt werden) danke für eure hilfe

 

[thecain]

Also... erstens würde ich nicht wenn möglich nicht subscriben:

ngOnInit(): void {
    this.topicKey$ = this.activatedRoute.queryParams.pipe(map(key => key.topicKey));
  

this.learningCards$ = this.topicKey.pipe(
        switchMap(key => this.topicService.getAllCardsFromHttp(this.topicKey).pipe(
            cards => cards.cards
        )
        ));
  }

Dann kannst du im Code mit der async pipe arbeiten und musst dich nicht um unsubscribe kümmern.

Nur eines anzuzeigen, könntest du dann mit einem Subject lösen, z.B.

elementToShow$ = new BehaviorSubject<number>(1);

activeCard$ = combineLatest([this.learningCards$, this.elementToShow]).pipe(
    map(([allCards, elementToShow]) => allCards[elementToShow])
);

Darauf kannst du auch mit der Async pipe subscriben... Bei einem Klick auf next, kannst du das subject updaten, was dann zu einem Update des Streams führt.

Wenn man ein Framework, wie z.b. Angular einsetzt, macht es einem viel einfacher, wenn man die Paradigmen des Frameworks versucht möglichst umzusetzen.

Sämtlicher Code ohne gewähr, einfach runtergeschrieben im Editor hier.

 

[Panda9296]

Vielen dank und wie kann ich dann die sachen im Json ändern?

 

[thecain]

Keine Ahnung, ich kenne deine Schnittstelle ja nicht...