Table only displays the first array | Angular Community | Page 1

polar onyx Jan 24, 2023, 7:21 PM

#

Hi,

I'm generating a table to display my data but only the first array is displayed. I'm using MatTableDataSource and to receive data I use .pipe. But still only 1 array of data is returned. Could someone tell me where I'm going wrong?

my cod
fail.component.ts

requisicoes!: Array<IRequisicaoFail>;

  //Propriedades públicas
  loading: boolean = true;
  requisicoes$ = this.requisicoesService.failImp().pipe(tap(() => this.loading = false));

  @ViewChild('TABLE') table!: ElementRef;

  displayedColumns: string[] = ['cpha', 'processo', 'data_nomeacao', 'vara', 'cpf', 'nit', 'advogado', 'motivo'];
  dataSource = new MatTableDataSource(this.requisicoes);

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(
    private title: Title,
    private requisicoesService: RequisicoesService,
  ) {
    super();
  }```

regal raven Jan 24, 2023, 7:26 PM

#

You never initialize this.requisicoes anywhere in that code, and yet the table is supposed to display its content.

polar onyx Jan 24, 2023, 7:29 PM

#

regal raven You never initialize `this.requisicoes` anywhere in that code, and yet the table...

Even if I called its here at Interface? ts requisicoes!: Array<IRequisicaoFail>;

regal raven Jan 24, 2023, 7:31 PM

#

That doesn't call anything. It declares a property, of type Array<IRequisicaoFail>, which is not initialized (and thus has the value undefined).

polar onyx Jan 24, 2023, 7:33 PM

#

regal raven That doesn't *call* anything. It *declares* a property, of type `Array<IRequisic...

And how do I start? simply requisicoes= [] ?

regal raven Jan 24, 2023, 7:34 PM

#

That will initialize the array, but it will be an empty array, so the table still won't have anything to display. What are you trying to achieve? Where's the data that the table should display?

polar onyx Jan 24, 2023, 7:35 PM

#

regal raven That will initialize the array, but it will be an empty array, so the table stil...

The data is here in requisicoes$ ts requisicoes$ = this.requisicoesService.failImp().pipe(tap(() => this.loading = false));

#

I just want to display them in my dataTable

regal raven Jan 24, 2023, 7:46 PM

#

That's an observable. But you never subscribe to the observable anywhere and do nothing with it. So nothing will never happen with it. You need to create a DataSource using that observable, or to subscribe to the observable and set the data of the data source when you the observable emits.

polar onyx Jan 24, 2023, 7:49 PM

#

regal raven That's an observable. But you never subscribe to the observable anywhere and do ...

How? 🤷🏿‍♀️

#

Sorry for the question. This table follows the example of another that did not need to reset the dataSource

#

would it be this?

#

constructor(
    private title: Title,
    private requisicoesService: RequisicoesService,
  ) {
    super();
    this.dataSource = new MatTableDataSource<IRequisicaoFail>([]);
  }```

regal raven Jan 24, 2023, 8:05 PM

#

No. How could that code make a table display any data? Where would the data come from? All you have, in terms of data, in that code, is an empty array.
I can give you example code, but I strongly encourage you to take a huge step back, to read a book about TypeScript and Angular and learn and practice the fundamentals before going further, because copying and pasting code that you don't understand won't lead you very far.

  displayedColumns: string[] = ['cpha', 'processo', 'data_nomeacao', 'vara', 'cpf', 'nit', 'advogado', 'motivo'];
  dataSource = new MatTableDataSource<IRequisicaoFail>([]);

  constructor(requisicoesService: RequisicoesService) {
    this.requisicoesService.failImp().subscribe(data => {
      this.loading = false;
      this.dataSource.data = data;
    });
  }

polar onyx Jan 25, 2023, 11:29 AM

#

regal raven No. How could that code make a table display any data? Where would the data come...

Good Morning!

I'm studying Angular and TypeScript. However, I still have little practice and "I was forced" to take on a project that had already started. I know my questions are stupid but I mean it. I always seek to solve and research solutions tirelessly. My last alternative is here. I have no mentors to help me. I apologize if my questions disturb the group. This is not my intention.

#

Your solution didn't work. The following error occurs:

   Type 'IRequisicao' does not have the following properties of type 'IRequisicaoFail': cpha, process, date_nomination, cpf and more 2.ts(2322)```

regal raven Jan 25, 2023, 11:31 AM

#

No problem in asking questions. I'm just advising you to read first, because books, documentation and articles are better are explaining how things work than answers to questions, which generally focus at a specific problem.

regal raven Jan 25, 2023, 11:35 AM

#

polar onyx Your solution didn't work. The following error occurs: ```The type 'ÌRequisicao...

The erorr message tells you what is wrong. Your original code initializes the data source with an array of type IRequisicaoFail. And you later said that this array comes from the observable returned by this.requisicoesService.failImp(). So I assumed that this observable emits values of type IRequisicaoFail[]. According to the error message, it emits, in fact, values of type ÌRequisicao[]. So you probably need to transform the array of ÌRequisicao from the observable into an array of IRequisicaoFail. I know nothing of these two types...

polar onyx Jan 25, 2023, 11:37 AM

#

My data comes from the backend like this [2023-01-24 14:50:16] local.INFO: array ( 'cpha' => '419041809013181', 'processo' => '00173720520188130418', 'data_nomeacao' => '23/05/2019', 'vara' => array ( 'codVara' => 2027, 'descricaoVara' => 'SECRETARIA DO JUÍZO', ), 'cpf' => '05956354666', 'nit' => '2957694133', 'advogado' => 'José da Silva', 'motivo' => array ( 0 => '419041809013181: n.º NIT incorreto.', ), )

#

my fail.component.html

📎 planilha-fail.component.html

regal raven Jan 25, 2023, 11:42 AM

#

You need to understand the message, and what you need to do. How to do it is just a matter of learning to manipulate objects and arrays in JavaScript. So let me explain with a simpler example:

your table wants to display a list of fruit juices
your observable provides a list of fruits
So, if you want to display the content from the observable as a list of fruit juices, you first need to transform the fruits into juices.
Do you understand?

polar onyx Jan 25, 2023, 11:44 AM

#

I understood! So I'll have to bring it already organized from the backend

regal raven Jan 25, 2023, 11:46 AM

#

Either the backend provides the juices directly, or your code, in the frontned, transforms each fruit into a juice. Since your table wants to display IRequisicaoFail[] and all you have is ÌRequisicao[], you need a way to transform the latter into the former. You should know what these two types represent, and if it makes sense or is ppossible to make that transformation.

polar onyx Jan 25, 2023, 2:41 PM

#

regal raven Either the backend provides the juices directly, or your code, in the frontned, ...

I checked and my backend is sending the data correctly. All of them. So the problem is the display itself. How do I see how data is coming to me? In case it is an Observable. In console.log it does not display the data

regal raven Jan 25, 2023, 5:15 PM

#

Your problem is a compilation problem. It has nothing to do with what data the backend sends. It has to do with your code. a something expects something of type string and you give it a number, the compiler will complain, because a number is not a string. Similarly, if something expects something of type IRequisicaoFail[] and you give it an ÌRequisicao[], the compiler complains, because those are not the same thing.
You really, really need to learn what types are before trying to use Angular.
You also need to learn what observables are. Those things are not trivial things that need to be learnt.

#Table only displays the first array