Observable with object Angular2

Question

At the beginning I want to apologize for my poor English. We build the of my work rest service. On the client side it supports angular2. I am a beginner in this technology. I read that it is better to use Observable, instead of promise. I want to get a single object with user data, and unfortunately console returns an error "Can not read property ... of undefined". The documentation Angular example uses an array rather than a single object. When I use the array, there is no error, but I need to download a single object. My question is, whether it is by Observable get object and show object in template?

** service **

import { Injectable } from "@angular/core";
import { AppParameters } from "../parameters";
import { AuthHttp } from "angular2-jwt";
import { AuthService } from "./auth.service";
import { Response } from "@angular/http";
import { Observable } from 'rxjs/Observable';
import { UsersModel } from "../../models/models";
import { GroupModel } from "../../models/models";

@Injectable()

export class ProfileService {

    private userUrl: string = AppParameters.ENDPOINT_URL + "/users";
    private groupUrl: string = AppParameters.ENDPOINT_URL + '/groups';
    private wallUrl: string = AppParameters.ENDPOINT_URL + "/posts/";


    constructor(
        private authHttp: AuthHttp,
        private authService: AuthService
    ){}

    getUsers(id) : Observable<UsersModel> {
            return this.authHttp.get(this.userUrl + '/' + id + '/')
                .map(this.extractData)
                .catch(this.handleError)
    }

    private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }

    private handleError (error: any) {
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

** component **

import { Component, OnInit } from "@angular/core";
import { AppParameters } from "../../shared/parameters";
import { ProfileConfig } from "./profile.config";
import { UsersModel } from "../../models/models";
import { ProfileService } from "../../shared/services/profile.service";
import { ActivatedRoute } from "@angular/router";


@Component({
    templateUrl: AppParameters.TEMPLATE_URL + ProfileConfig.COMPONENT_NAME + '/user.html',
    providers: [ ProfileService ]
})

export class UserComponent implements OnInit {

    user : number;
    data: UsersModel;
    errorMessage: string;

    constructor(
        private profileService: ProfileService,
        private route: ActivatedRoute,
    ){}

    ngOnInit() {
        this.getUser();
        this.getData();
    }

    getUser() {
        this.route.params
            .subscribe(params => {
                this.user =+ params['id'];
            });
    }

    getData() {
        this.profileService.getUsers(this.user)
            .subscribe(
                data => this.data = data,
                error => this.errorMessage = <any>error
            );
    }
}

model

export class UsersModel {
    id: number;
    username: string;
    email: string;
    user_profile: UserProfileModel;
}

class UserProfileModel {
    city: string;
    status: string;
    about: string;
}

cptnk · Accepted Answer · 2016-09-21 11:34:06Z

1

You could use the () complete functionality here and check within your template if the observer completed.

// component
observer.subscribe(
   value => this.obj = value,
   (errData) => { this.renderErrors() },
   () => {
       this.variableFilledWhenDone = true;
   }
);

<!-- template -->
<div *ngIf="ariableFilledWhenDone">
       <!-- stuff that needs to happen async -->
    <div>

answered Sep 21, 2016 at 11:34

cptnk

2,42020 silver badges30 bronze badges

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

3 Comments

Andrew Pakula Over a year ago

It does not fix the problem. The error disappeared, but the values are not get from service. The variable is not set to true. The idea is to retrieve the value of the object through observable. The documentation angular, for example Observable are get data only from the Table, there is nothing about the objects. That's why I wonder if it can be done

Andrew Pakula Over a year ago

I'm sorry for the mistake, I mean not on the table, but this array. You need to get the properties of a single object instead and not with array

cptnk Over a year ago

I would assume that you have trouble getting the data from the service itself.

slaesh · Accepted Answer · 2016-09-21 11:30:36Z

0

I don't get your exact problem, but i would change this:

ngOnInit() {
    this.route.params
        .subscribe(params => {
            // route parameter changed.. lets get new data !
            this.user =+ params['id'];
            this.getData(); // do it here, cause NOW you have that id..
        });
}

answered Sep 21, 2016 at 11:30

slaesh

17k6 gold badges53 silver badges54 bronze badges

4 Comments

Andrew Pakula Over a year ago

As for the get properties are not from the table, but with the object using Observable.

slaesh Over a year ago

What table? Please clarify your problem.. don't get your actual problem right now.. at which point are you getting that error message? post the complete error message pls..

Andrew Pakula Over a year ago

Eh. Sorry for the mistake. The documentation Angular data get from the model array, and I need to get them from the object.

slaesh Over a year ago

Show your template please where data: UserModel is used.

Andrew Pakula · Accepted Answer · 2016-09-21 12:28:20Z

0

<h3>Hello {{ data.username }}</h3>

<p>Change yours personal data</p>

<set-user-data [data] = 'data'></set-user-data>

answered Sep 21, 2016 at 12:28

Andrew Pakula

411 silver badge3 bronze badges

Comments

Andrew Pakula · Accepted Answer · 2016-09-21 16:47:05Z

0

I found a solution. In the future, if someone was looking for

private extractData(res: Response) {
    let body = <UsersModel>res.json();
    return body || { };
}

answered Sep 21, 2016 at 16:47

Andrew Pakula

411 silver badge3 bronze badges

Collectives™ on Stack Overflow

Observable with object Angular2

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Related