Error returning an array of objects from an Angular function

Question

Good afternoon, I have a problem when I want to return an array of objects from an external function.

I have declared an Object class with 2 properties, its constructor and one that works where I return an array with more than 50 objects for this example I only put 4 objects

export class Object {
  formcontrolName: String;
  formcontrolTraducido: String;

  constructor(formcontrolName: String, formcontrolTraducido: String) {
    this.formcontrolName = formcontrolName;
    this.formcontrolTraducido = formcontrolTraducido;
  }

  getData() {
    return [
      { formcontrolName: 'callId', formcontrolTraducido: 'CId' },
      { formcontrolName: 'collegeCareerId', formcontrolTraducido: 'Carrera' },
      {
        formcontrolName: 'collegeDepartmentId',
        formcontrolTraducido: 'Nombre del Departamento/Centro',
      },
      {
        formcontrolName: 'detailedAreaKnowledgeId',
        formcontrolTraducido: 'Campo Detallado',
      },
    ];
  }
}

The problem is that I want to call from another component the getData function of the Object class, but when returning I get the following error:

Type '() => { formcontrolName: string; formcontrolTraducido: string; }[]' is missing the following properties from type 'Object[]': pop, push, concat, join

import { Component, OnInit } from '@angular/core';
import { Object } from './object';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
 data: Object;
  arrayData: Object[];
  constructor() {}

  ngOnInit() {
    this.arrayData = this.data.getData;
    console.log('arrayData: ' + this.arrayData);
  }

}

stackblitz example code

I am new to angular and to working with arrays, I would like to know what I can do to solve my problem. Thank you very much

Daniel Rodríguez Meza · Accepted Answer · 2022-04-09 18:56:22Z

1

First of all the type for the property arrayData is not of type Object which is the class that you're using, so a more proper type would be the same as the one that is returned by the method getData.

You can get its return type by using the typescript helper type ReturnType, so a good way to type this would be like:

  arrayData: ReturnType<Object['getData']>;

One recommendation that I have is not to use the name Object for a class, since it has the same name as Object a javascript builtin.

After that the problem that you have here:

  ngOnInit() {
    this.arrayData = this.data.getData();
    console.log('arrayData: ' + this.arrayData);
  }

Is that you are assigning a method to a variable that expects an array of something, that's why you get the error:

Type '() => { formcontrolName: string; formcontrolTraducido: string; }[]' is missing the following properties from type 'Object[]': pop, push, concat, join

You just need to call the method like:

    this.arrayData = this.data.getData();

With that all in mind the final code would look like:

import { Component, OnInit } from '@angular/core';
import { Object } from './object';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular';
  data: Object;
  arrayData: ReturnType<Object['getData']>;
  constructor() {}

  ngOnInit() {
    this.arrayData = this.data.getData();
    console.log('arrayData: ' + this.arrayData);
  }
}

answered Apr 9, 2022 at 18:56

Daniel Rodríguez Meza

1,2771 gold badge9 silver badges19 bronze badges

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

2 Comments

Kenny Cruz Over a year ago

Excuse me Daniel, but now another error appears to me, when executing your solution;: Cannot read properties of undefined (reading 'getData')

Daniel Rodríguez Meza Over a year ago

That is probably a runtime error, because you haven't initialized data with an instance of Object. You could define data as: data = new Object('something', 'something')

Collectives™ on Stack Overflow

Error returning an array of objects from an Angular function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related