• Wir präsentieren Dir heute ein Stellenangebot für einen Frontend-Entwickler Angular / Java in Braunschweig. Hier geht es zur Jobanzeige

Angular geschachteltes json-Objekt verändern

P

Panda9296

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

das ist ein einzelnes Objekt(habe viel viel mehr davon :D... so das auslesen dieses Objektes klappt super...
Javascript:
//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...
1613752688513.png

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:
1613752766989.png

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
 
T

thecain

Top Contributor
Also... erstens würde ich nicht wenn möglich nicht subscriben:
Javascript:
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.
Java:
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.
 
Anzeige

Neue Themen


Oben