Setting up a Variable with an Object Attribute in Angular

Question

Setting up a Variable with an Object Attribute in Angular

I am attempting to create a variable that will set a specific property of an object retrieved through the get method.

While using console.log in the subscribe function, I am able to retrieve the entire array value. However, as a beginner, I am struggling to modify only one property of the objects within 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

javascript angular typescript

Answer 1

Answer №1

You have redefined the variable res within your passed-in function to be named map.
Change the singular form of name to names since you are working with a string array, and the plural form better describes the content of the field.
Avoid trying to access a non-existent field or index in res, as in the case where you used res[''], which is incorrect syntax.
I placed the function call inside ngOnInit. While it can be located elsewhere, this placement 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);
}

In response to comments:

The IDE is indicating that property 'map' does not exist on type 'Object'. Is this possibly a bug?

Regarding your service, ensure the signature for the return type is correct. Below is an example. You could also create an interface and use that as the return type instead of just {name:string}, maintaining the [] to indicate 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');
  }
}

Answer 2

You have redefined the variable res within your passed-in function to be named map.
Change the singular form of name to names since you are working with a string array, and the plural form better describes the content of the field.
Avoid trying to access a non-existent field or index in res, as in the case where you used res[''], which is incorrect syntax.
I placed the function call inside ngOnInit. While it can be located elsewhere, this placement 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);
}

In response to comments:

The IDE is indicating that property 'map' does not exist on type 'Object'. Is this possibly a bug?

Regarding your service, ensure the signature for the return type is correct. Below is an example. You could also create an interface and use that as the return type instead of just {name:string}, maintaining the [] to indicate 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');
  }
}

Answer 3

Answer №2

To retrieve the names from an array of objects, you can simply use res.map(res => res.name). Avoid using res[''].map(res => res.name). It seems like you are attempting to access a property with an empty string as the key within your object, which does not exist.

Answer 4

To retrieve the names from an array of objects, you can simply use res.map(res => res.name). Avoid using res[''].map(res => res.name). It seems like you are attempting to access a property with an empty string as the key within your object, which does not exist.

Answer 5

Answer №3

If you wish to perform this action directly within the http get Method

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

Alternatively, if you only need to retrieve a single property from the response

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

Answer 6

If you wish to perform this action directly within the http get Method

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

Alternatively, if you only need to retrieve a single property from the response

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

Setting up a Variable with an Object Attribute in Angular

Answer №1

Answer №2

Answer №3

Similar questions

I keep receiving an error in Angular JS but I'm unsure of the reason

Utilize fetch API in React to streamline API responses by filtering out specific fields

Best practices for customizing Material UI v5 Switch using Theme

Storing information from a signup form using Angular

Guide on how to switch a class on the body using React's onClick event

Having trouble with the installation of Parcel bundler via npm

Avoid the import of @types definition without exports in TypeScript to prevent the error TS2306 (not a module)

Nightwatch execute() function not technique following anticipate

Updating the index page with AJAX in Rails 4: Step-by-step guide

Alter the language settings of the Datepicker feature in Material Angular 4

Add the AJAX response to the dropdown menu options

Visual Studio Code continues to compile code automatically without requiring me to save any changes

Using AngularJS to Dynamically Set the Default Selection in a SELECT Element

Utilizing a combination of MVC, jQuery, and Ajax to ensure that JavaScript is fully loaded before proceeding

When using Angular 2 formControl, manually changing the value may not be detected by the form

Error: Papa is not defined. The file was loaded from the CDN in the header section

Outputting data to a WriteStream within an Event Listener

Strategies for displaying error messages in case of zero search results

Guide on merging non-modular JavaScript files into a single file with webpack

Is there a way to invoke a class method from the HTML that is specified within its constructor function?