Skip to content
Advertisement

Error returning an array of objects from an Angular function

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

Advertisement

Answer

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);
  }
}
Advertisement