Angular 4 / Can't retrieve data from Array by id

Question

I am trying to retrieve an object from Array by id with the method getItem().

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { IItem } from './item';

@Injectable()
export class ItemsService {
  private _itemsUrl = './items.json';

  constructor(private _http:Http){}

  getItems(): Observable<IItem[]> {
    return this._http.get(this._itemsUrl)
    .map((response: Response) => <IItem[]>response.json().itemsData)
  }

  getItem(id:number): Observable<IItem> {
    return this.getItems()
    .map(items => items.find(item => item.id === id));
  }

}

The service is injected into my component.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { ItemsService } from './items.service';
import { IItem } from './item';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  item: IItem;

  constructor(
    private _ItemsService: ItemsService,
    private route: ActivatedRoute
    ) { }

  ngOnInit(): void {

    this._ItemsService.getItems().subscribe(items => console.log(items))

    this.route.params.forEach((params: Params) => {
        let id = +params['id'];
        this._ItemsService.getItem(id).subscribe(item => console.log(item));
    })
   }
}

Exported class IItem:

export class IItem {
    id?: number;
    title?: string;
    titleUrl?: string;
}

items.json:

{
  "itemsData" : [
    {
      "id": 1,
      "title": "Item 1",
      "titleUrl": "item-1"
    },
    {
      "id": 2,
      "title": "Item 2",
      "titleUrl": "item-2"
    },
    {
      "id": 3,
      "title": "Item 3",
      "titleUrl": "item-3"
    }
  ]
}

I test the methods inside my component: ngOnInit(): void {

    this._ItemsService.getItems().subscribe(items => console.log(items)) //Works fine

    this.route.params.forEach((params: Params) => {
        let id = +params['id'];
        this._ItemsService.getItem(id).subscribe(item => console.log(item)); // Undefined
   }

Tried to create a project in editor, but it doesn't work - sorry

Here!

So, how can I retrieve the object by id from Observable with my getItem method?

You're not importing HttpClientModule in your appModule. See the docs: angular.io/guide/http — Orlandster
– Orlandster, Commented Oct 24, 2017 at 22:08
Http import is really enough, I think, cause my http request works well on getItems() method. — Alexandr Belov
– Alexandr Belov, Commented Oct 25, 2017 at 10:33

kemsky · Accepted Answer · 2017-10-24 22:36:51Z

1

There can be several problems:

  getItem(id:number): Observable<IItem> {
    return this.getItems()
    .map(items => items.find(item => item.id === id));
  }

id parameter is NaN
There is no item with this id
item.id is not a number i.e. string

Just add more logs and will see.

answered Oct 24, 2017 at 22:36

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexandr Belov Over a year ago

getItems() returns an array of objects. In console I can see my objects, which contain properties "id" with Numbers value, so none of the three suppositions seems to be true

kemsky Over a year ago

I seriously doubt that, the only reason could be is that condition item.id === id returns false.

Alexandr Belov Over a year ago

You were right. id is NaN in that case, I remade the code using Promises instead of Observables.

Mehdi · Accepted Answer · 2017-10-24 22:37:06Z

0

The problem is coming from your map function

try this :

getItem(id:number): Observable<IItem> {
    return this.getItems()
    .map((response: Response) => <IItem[]>response.json().itemsData.find(item => item.id === id));
}

answered Oct 24, 2017 at 22:37

Mehdi

2,4081 gold badge19 silver badges28 bronze badges

1 Comment

Alexandr Belov Over a year ago

Terminal throws the error: The type argument for type parameter 'T' cannot be inferred from the usage. Consider specifying the type arguments explicitly. Type argument candidate 'IItem[]' is not a valid type argument because it is not a supertype of candidate 'Response'. Property 'includes' is missing in type 'Response'.

Collectives™ on Stack Overflow

Angular 4 / Can't retrieve data from Array by id

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related