2

Hello I'm wondering if it's possible to create a class where you implement an interface and from there you send the data get from .get service to create a new object. Something like this

import { Component, OnInit } from '@angular/core';
import { User} from '../interfaces/user';
import {UserService} from '../services/user.service';
import { UserClass } from  '../classes/user-class'

@Component({
  selector: 'up-pros',
  templateUrl: './pros.component.html',
  providers: [UserService]
})
export class ProsComponent implements OnInit {
  public users :User[];
  public term: string;
  constructor(private _httpService: UserService) { }

  ngOnInit() {
    console.log(UserClass)
    this.term= 'INSTRUCTOR';
    this._httpService.searchUsers(this.term)
        .subscribe(
          data => {this.users = new UserClass(data), console.log(data)},
          error => alert(error + ' Error Get')
        );
  }
}

where my UserClass code is something like next one

import { User } from '../interfaces/user';
import { Address } from "../interfaces/address";

export class UserClass implements User {

public  id:           number
public  name:         string
public  password:     string
public  lastNameA:    string
public  lastNameB:    string
public  photo:        string
public  telephone:    string
public  email:        string
public  userType:     string
public  active:       string
public  score:        number
public  createdAt:    string
public  updatedAt:    string
public  Address:      Address

constructor ( id:           number,
              password:     string,
              name:         string,
              lastNameA:    string,
              lastNameB:    string,
              photo:        string,
              telephone:    string,
              email:        string,
              userType:     string,
              active:       string,
              score:        number,
              createdAt:    string,
              updatedAt:    string,
              Address:      Address)  {
                this.name       = name
                this.password   = password
                this.lastNameA  = lastNameA
                this.lastNameB  = lastNameB
                this.photo      = photo
                this.telephone  = telephone
                this.email      = email
                this.userType   = userType
                this.active     = active
                this.score      = score
                this.createdAt  = createdAt
                this.updatedAt  = updatedAt
                this.Address    = Address
              }

}

and by the last, the interface:

import { Address } from "./address"

export interface User {
  name:       string;
  password:   string;
  lastNameA:  string;
  lastNameB:  string;
  photo:      string;
  telephone:  string;
  email:      string;
  userType:   string;
  active:     string;
  score:      number;
  createdAt:  string;
  updatedAt:  string;
  Address:    Address;
}

Is this possible? because if I try to do this Im getting the next error at pros-component.ts:

Supplied parameters do not match any signature of call target.
[default] Checking finished with 1 errors

My service:

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { User } from '../interfaces/user';


@Injectable()
export class UserService {
  url= 'http://localhostapi/users';

  constructor(private _http: Http){}


  getUsers(){
    return this._http.get(this.url)
      .map(res => res.json());
  }

  searchUsers(term : string ){
    return this._http.get('http://localhostapi/listas?user='+term)
      .map(res => res.json());

  }
  searchUser(term : string ){
    return this._http.get('http://localhostapi/users/'+term)
      .map(res => res.json());

  }

  postUsers(user: User){

    var headers = new Headers ();
    headers.append('Content-Type','application/json');
    return this._http.post(this.url, user, {headers: headers})
    .map(res => res.json());
  }

  updateUsers(user: User, term: string){

    var headers = new Headers ();
    headers.append('Content-Type','application/json');
    return this._http.put(this.url+"/"+term, user, {headers: headers})
    .map(res => res.json());
  }
}
7
  • Don't write a constructor with a dozen arguments. Commented Dec 14, 2016 at 16:44
  • So it's not recomendable what I'm doing or just the dozen arguments in the constructor? Commented Dec 14, 2016 at 16:46
  • This might help: stackoverflow.com/questions/37520578/… Commented Dec 14, 2016 at 17:03
  • In your service, how are you returning the data? Something like this Observable<Array<UserClass>> or Observable<UserClass[]>? Commented Dec 14, 2016 at 17:11
  • I just updated the post with my service @developer033 Commented Dec 14, 2016 at 17:14

1 Answer 1

2

If the structure of data matches the list of UserClass, you can simply do

this._httpService.searchUsers(this.term)
        .subscribe(
          data => {
                      this.users = data as User[];
                      console.log(data)
                  },
          error => alert(error + ' Error Get')
        );
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you. Let me try that.
Thank you so much, it worked. Can you explain why I can't just create an instance of the class like traditional modes?
Of course, we can create instance like "traditional modes" but in this particular case, there isn't any constructor in UserClass which takes a list of User as a parameter as data has structure of list of User. TypeScript is a structural type system. typescriptlang.org/docs/handbook/classes.html
ohhh yeah, you right. Thank you so much, sir. Im so grateful for your help. :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.