How to transform Observable coming from a service to an Array to ngFor in Angular2?

Question

I have a problem with returns types. Here is my problem : First my data structure is: {"categoryName":"Google","id":"58591d2b7672d99910497bec","clientId":"585808f6737f6aad1985eab2"},{"categoryName":"Yahoo","id":"58591d4c7672d99910497bef","clientId":"585808f6737f6aad1985eab2"},{"categoryName":"Msn","id":"585d25f6ae4b2ecb056bc514","clientId":"585808f6737f6aad1985eab2"}

I have an HTML file that contains:

<tr *ngFor="let category of categories; let id = index">
                        <td>
                            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
                                   for="row[3]">
                                <input type="checkbox" id="row[3]" class="mdl-checkbox__input"/>
                            </label>
                        </td>
                        <td class="mdl-data-table__cell--non-numeric"><a [routerLink]="['/category/links']"></a>{{
                            category.categoryName }}
                        </td>
                        <td class="mdl-data-table__cell--non-numeric">{{category.categoryName}}</td>
                         <td #category.id><i (click)="deleteCategory(id)" class="material-icons">delete</i></td>
                    </tr>

The component is as below (I only write here ngOnInit() ):

ngOnInit(): void
    {
        this.categoryService.getCategories().subscribe((data) => {
               this.categories=data;
                console.log("data inside component" + data);
            }
        )
            //console.log(JSON.stringify(this.categories));
    //        .map((data) =>
    //        {
    //            this.categories=data;
    //        })
    }

and the service is:

getCategories(){
        return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => {

            console.log("type of data: "+ typeof(data));

            console.log ("data:" + JSON.stringify(data));
            //return data;
        }, err => {
            console.log(err);
        });
    };

If I do a console.log from the service, the data is shown. If I do a console.log from the component, nothing is shown : the message is:

data inside componentundefined

as if the "data" is not passed from the Service to the Component, not passed, or not from the correct type.

Any idea?

Thanks in advance and best regards

I think you are not returning an observable from your service. — JSNinja, Jan 31 '17 at 13:55
For your question in the title check out: http://stackoverflow.com/questions/41865471/rxjs5-operator-to-convert-object-map-to-array, and you posted commented //return data; in your service's map operator.. without that, your Observable is not returning anything... I assume that was an oversight? — Thibs, Jan 31 '17 at 14:02

score 1 · Accepted Answer · answered Jan 31 '17 at 14:02

uncomment return in map statement. because you do not return anything after do map on data, you got undefined return.

getCategories() {
   return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => {

     console.log("type of data: "+ typeof(data));

     console.log ("data:" + JSON.stringify(data));
     return data; // uncomment this line
   }, err => {
      console.log(err);
   });
};

How to transform Observable coming from a service to an Array to ngFor in Angular2?

1 Answers1