• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Angular 2 - Odczyt pewnej tablicy z obiektem.

VPS Starter Arubacloud
0 głosów
798 wizyt
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:

http://prntscr.com/ierx1f

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,190 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,190 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,190 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,190 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()
 
    );
  }

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 305 wizyt
pytanie zadane 25 grudnia 2017 w JavaScript przez Sidzej Użytkownik (850 p.)
0 głosów
1 odpowiedź 139 wizyt
pytanie zadane 10 grudnia 2016 w JavaScript przez tyskocz Nowicjusz (230 p.)
0 głosów
4 odpowiedzi 880 wizyt
pytanie zadane 13 sierpnia 2018 w JavaScript przez Tomek Reda Obywatel (1,110 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...