Angular 2 - Odczyt pewnej tablicy z obiektem.

pytanie zadane 14 lutego 2018 w JavaScript przez No Lime Gaduła (4,540 p.)

Czołem!

Mam problem z odczytaniem elementów tablicy, wraz z obiektem, którą dostaję z zapytania.

O to jak wygląda tablica:

Generalnie to co widać na screenie (czyli dane w konsoli) są wywoływane przez zapytanie :

 console.log(this.myDataFromDb);

Gdy jednak będę próbować wejść "niżej" czyli :

 console.log(this.myDataFromDb[0]);

dostaje w konsoli "undefined".

Próbowałem różnych wariacji jeżeli chodzi o wywołanie głębszych danych ale niestety bezskutecznie.

Tutaj zapodaje kolejno mój komponent wraz z serwisem:

@Component({
  selector: 'app-frienddetails',
  templateUrl: './frienddetails.component.html',
  styleUrls: ['./frienddetails.component.css']
})
export class FrienddetailsComponent implements OnInit {
name:string;
id:number;
myDataFromDb: any[] = [];
  constructor(public friendService: FriendService, private route: ActivatedRoute) {
    this.name = this.route.snapshot.params['name'];
  
   }
   fetchListOfMatch(query){
    this.friendService.getListOfMatch(query).subscribe((data) =>
        this.myDataFromDb.push(data)

    );
  }
  ngOnInit() {
this.id = this.friendService.getIdByName(this.name);
 this.friendService.id = this.id;
 this.friendService.query = `${this.friendService.apiUrl}${this.friendService.id}?season=11&${this.friendService.apikey}`;
 console.log(this.myDataFromDb);
 this.fetchListOfMatch(this.friendService.query);



  }

}

@Injectable()
export class FriendService{
    friendArray: any;
    apikey = APIKEY;
    id:number;
    dataFromDb:any=[];
apiUrl = "https://eun1.api.riotgames.com/lol/match/v3/matchlists/by-account/";
    query : string;
constructor(private http: Http){
    this.friendArray = FRIEND;
}


getIdByName(name:string){
    for(let i of this.friendArray)
    {
        if(i.nick == name)
        {
          return i.account_id;
        }

 
    }
}

getListOfMatch(query): Observable<any>{
    return this.http.get(query)
        .map(res => res.json())
        .do(res => this.dataFromDb[query] = res)
}
}

komentarz 14 lutego 2018 przez ScriptyChris Mędrzec (190,170 p.)

Obstawiam, że chcesz dostać się do elementów tablicy, zanim one się tam znajdą, bo tablicę uzupełniasz asynchronicznie. Natomiast w konsoli widzisz zawartość tablicy, ponieważ zdążyła się zapełnić zanim ją sobie rozwinąłeś - zwróć zresztą uwagę (na screenie) na ikonkę pustej tablicy (tuż pod napisem "Angular is running...") - nie wiem jak w Firefox, a jeśli dobrze widzę, to z niego korzystasz, ale w Chrome DevToolsach gdy najedziesz myszką na obiekt w konsoli, który zmienił się w trakcie, to pojawi się informacja, że jego zawartość została utworzona dynamicznie.

Dla pewności wykonsoluj sobie tablicę w takiej formie:

console.log( JSON.parse( JSON.stringify( this.myDataFromDb ) ) );

komentarz 15 lutego 2018 przez No Lime Gaduła (4,540 p.)

Twoje polecenie zwraca mi jedynie to: Link do prntscrt.com

Próbowałem użyć json.parse i json.strongify też na poziomie serwisu, w momencie użycia funkcji .map. Bezskutecznie.

A co do pustej ikonki - wydaje mi się, że to kwestia deklaracji mojej zmiennej

dataFromDb:any=[];

bo przypisuje do niej pusty array a metoda .push "popycha" mój obiekt dalej o jedno miejsce. Nie jestem pewny czy to kwestia tego.

Nie wiem szczerze mówiąc jak mam się dobrać do środka. Próbowałem też w pętli for to w ogóle wyświetlić. Tez nic nie dało.

komentarz 15 lutego 2018 przez ScriptyChris Mędrzec (190,170 p.)

Twoje polecenie zwraca mi jedynie to

Dobrze zwraca, ponieważ została zerwana referencja i widzisz wtedy tablicę o zawartości takiej, jaka była w momencie interpretowania tamtej linijki. W poprzednim przypadku w konsoli widziałeś zaktualizowaną zawartość tablicy.

Próbowałem użyć json.parse i json.strongify też na poziomie serwisu, w momencie użycia funkcji .map

W którym miejscu? Tutaj?

getListOfMatch(query): Observable<any>{
    return this.http.get(query)
        .map(res => {
            console.log( res ); // zmienną 'res' powinieneś widzieć, a tablicy myDataFromDb nie, ponieważ nie jest dostępna w tym skrypcie
            return res.json());
        });
    /* ... */

W tym miejscu powinieneś widzieć już wypełnioną tablicę:

   fetchListOfMatch(query){
    this.friendService.getListOfMatch(query).subscribe((data) =>
        this.myDataFromDb.push(data);
        console.log( this.myDataFromDb[ 0 ] ) // tutaj tablica nie powinna być już pusta
    );

komentarz 15 lutego 2018 przez No Lime Gaduła (4,540 p.)

Dzięki wielkie za odpowiedź. Trochę pokombinowałem od momentu ostatniej mojej odpowiedzi.

  getMatchGameId(){

    for(let i of this.objectDataArray){
      let k = i.matches.length;
      for(let c = 0; c < k; c++)
      {
        this.gameId.push(i.matches[c].gameId);
      }
      }


  }
  ngOnInit() {
this.id = this.friendService.getIdByName(this.name);
 this.friendService.id = this.id;
 this.friendService.query = `${this.friendService.apiUrl}${this.friendService.id}?season=11&${this.friendService.apikey}`;



 this.fetchListOfMatch(this.friendService.query);

  }
  ngDoCheck(){
  
    this.getMatchGameId(); 
   
    console.log(this.gameId);


   
  }
}

Ten kod zwraca mi wszystko czego chcę. Mogę dostać się do tablicy w obiekcie, mogę wyświetlić z niej dane, zapisać do zmiennej. Wszystko spoko, tylko pytanie czy dobrym nawykiem jest umieszczanie takiego kodu w cyklu DoCheck?

komentarz 15 lutego 2018 przez ScriptyChris Mędrzec (190,170 p.)

Co chcesz osiągnąć? Subskrypcja powinna Ci wystarczyć.

Apropos ngDoCheck - z tego co czytam wynika, że jest to sposób na szczegółowe sprawdzanie zmian w trakcie życia komponentu. Metoda ta jest odpowiednikiem deep-watch z AngularJS. Z kolei deep watch jest obciążającą operacją, ponieważ sprawdza obiekty po wszystkich propertisach, a nie tylko według referencji, bądź zmianie wartości z "pierwszego poziomu". Nie mam pewności, czy ngDoCheck jest tak samo mało efektywny jak deep-watch z AngularJS, ale czytam, że także przeprowadza dogłębne sprawdzenie propertisów i wołany jest przy każdej zmianie (nawet jeśli dany obiekt został nietknięty) wykrytej w obrębie komponentu, Lepiej nie stosować tego jeśli możesz zastosować bardziej wydajne sposoby sprawdzania zmian w danych.

komentarz 15 lutego 2018 przez No Lime Gaduła (4,540 p.)

Co chcę osiągnąć? Chcę wyodrębnić matchId z pierwszego requesta aby wykonać kolejny, tym razem o szczegóły meczu. Po prostu muszę operować na tych danych gdy są zwracane a nigdzie indziej - oprócz widoku - nie są one wyświetlane.

komentarz 15 lutego 2018 przez ScriptyChris Mędrzec (190,170 p.)

Jeśli chcesz wykonać kolejnego requesta na podstawie danych z pierwszego, to zrób to w subscribe zamiast push'ować w nim dane do tablicy:

   fetchListOfMatch(query){
    this.friendService.getListOfMatch(query).subscribe((data) =>
        this.myDataFromDb.push(data) // wykonaj kolejny request zamiast używać [].push()
 
    );
  }