Create a Variable with an Object Property - Angular

Question

I'm trying to create a variable to set one of the properties of an object obtained by the get method.

When I give console in subscribe I retrieve the value of the array, but I'm having difficulty (i'm beginner) to set only one of the properties of the objects in that array.

Component:

this.mainService.getGraph()
    .subscribe(res => {
      console.log(res) 
      this.name = res[''].map(res => res.name)
      console.log(this.name)

Console.log:

(5) […]

0: Object { name: "Carlos", lastname: "Moura", participation: 5 }

1: Object { name: "Fernanda", lastname: "Oliveira", participation: 15 }

2: Object { name: "Hugo", lastname: "Silva", participation: 20 }

3: Object { name: "Eliza", lastname: "Souza", participation: 20 }

4: Object { name: "Anderson", lastname: "Santos", participation: 40 }

length: 5

<prototype>: Array []
main.component.ts:26:6
ERROR TypeError: "res[''] is undefined"
    ngOnInit main.component.ts:27
    RxJS 13
    Angular 8

this.name = res[0].name;? <= assign the component's field name to the field name of the first object in the returned array. — Igor
– Igor, Commented Mar 4, 2019 at 15:52
Can you be more specific about which property of user object you want to change / add? What value you want to give to "this.name" ? — Alexandre Nicolas
– Alexandre Nicolas, Commented Mar 4, 2019 at 15:53
i need to select all array names. because with these names I will create a doughnut chart with the results — Felipe Noka
– Felipe Noka, Commented Mar 4, 2019 at 16:00

Igor · Accepted Answer · 2019-03-04 16:56:06Z

2

You are redefining res in your passed in function to map.
Use a plural of name to names, you want a string array so the plural is more appropriate and conveys what the field contains.
Do not try to access a non existent field or index on res, you had res[''] which is not correct.
I put the call in ngOnInit, it might be located elsewhere but this allowed me to define the assigned variable member above it.

names: string[];

ngOnInit() {
    this.mainService.getGraph()
      .subscribe(res => {
        console.log(res);
        this.names = res.map(_ => _.name);
        console.log(this.names);
}

From the comments:

...the IDE says property 'map' doesnt exist on type 'Object'. would it just be a bug

About your service. Make sure the signature is correct on the return type. Here is an example, you can also define an interface and return that instead of {name:string} (but keep the [] which denotes there is an array being returned).

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export class MainService {
  constructor(private readonly http: HttpClient){}

  getGraph() : Observable<{name: string}[]> {
    return this.http.get<{name: string}[]>('/some/url');
  }
}

edited Mar 4, 2019 at 16:56

answered Mar 4, 2019 at 16:11

Igor

62.5k10 gold badges111 silver badges181 bronze badges

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

2 Comments

Felipe Noka Over a year ago

perfect! It worked. but, the IDE says property 'map' doesnt exist on type 'Object'. would it just be a bug?

Igor Over a year ago

@FelipeNoka - make sure that the signature of mainService.getGraph returns Observable<{name: string}[]>. You can replace {name: string} with a custom interface or type.

Andrei · Accepted Answer · 2019-03-04 15:52:45Z

0

Just use res.map(res => res.name). instead of res[''].map(res => res.name). In your case you are trying to access property with key equal to empty string inside of your object, and it doesn't exist

answered Mar 4, 2019 at 15:52

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

1 Comment

Felipe Noka Over a year ago

without the [] says property 'map' does not exist in object

Abel Valdez · Accepted Answer · 2019-03-04 16:06:04Z

0

You can do it directly in the http get Method

this.http.get(url).pipe(
 map(res => {
   res['newProperty'] = 'value';
   return res;
 })
);

Even if you want just call back just one property

this.http.get(url).pipe(
     map(res => {       
       return res.name;
     })
    );

answered Mar 4, 2019 at 16:06

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

Collectives™ on Stack Overflow

Create a Variable with an Object Property - Angular

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related