Provided data source did not match an array, Observable, or DataSource Error

Question

I am receiving the response from an aggregate query from MongoDb collection for generating a report. I am getting this provided data source did not match an array, Observable or DataSource error. Please help.

my response from database is

{
  vitems: [
    { itemQty: -19, count: 3, itemCode: '333.5.23' },
    { itemQty: -24, count: 4, itemCode: '113.77.33' },
    { itemQty: -28, count: 5, itemCode: '77.34.565' },
    { itemQty: -18, count: 3, itemCode: '7611' }
  ]
}

my ts file as

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MasterService } from '../master.service';
import { MatTableModule, MatTable, MatTableDataSource} from '@angular/material/table'
import { environment } from '../../environments/environment.development';
import { VItem } from '../vitem';


interface Nitem {
              itemQty : number,
              count : number,
              itemCode : string
}


@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrl: './stock.component.css'
})
export class StockComponent implements OnInit{

  masterUrl = environment.domain + 'invoices/stock';
  stockItems : Nitem[];
  displayedColumns: string[] = ['itemCode', 'itemQty'];
  
  @ViewChild(MatTable, {static:true}) table!: MatTable<any>;
  
  constructor(private masterService : MasterService){}

  ngOnInit(): void {
    this.masterService.getMasters(this.masterUrl)
    .subscribe(data => {
      this.stockItems = data;
    });
  }
  
}

the HTML file as

    <div  class="container text-center">
              
        <table mat-table [dataSource]="stockItems" #mytable class="my-table mat-elevation-z8">
          
          <ng-container matColumnDef="itemCode">
            <th mat-header-cell *matHeaderCellDef> Item Code</th>
            <td mat-cell *matCellDef="let element"> {{element.itemCode}} </td>
          </ng-container>
      
          <ng-container matColumnDef="itemQty">
            <th mat-header-cell *matHeaderCellDef> Stock</th>
            <td mat-cell *matCellDef="let element"> {{element.itemQty}} </td>
          </ng-container>
      
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      
      </div>

you probably want to include masterService.getMasters method. (what is return type?... Observable<Nitem[]>?) — browsermator
– browsermator, Commented May 22, 2024 at 21:32
getMasters(masterUrl : string) : Observable<any[]>{ return this.http.get<any[]>(masterUrl, this.httpOptions) } — Manickam Parameswaran
– Manickam Parameswaran, Commented May 23, 2024 at 4:31
better to make the types match backend/front and specify... (instead of using "any[]") Right now looks like you're getting a vitems, that contains a list of Nitem as it's only property. Make front-end and back-end models (the structure of the data) match. Answer below takes the list to match front-end model. — browsermator
– browsermator, Commented May 23, 2024 at 15:59

Naren Murali · Accepted Answer · 2024-05-22 20:51:38Z

1

Could you try accessing the array inside vitems

...
ngOnInit(): void {
    this.masterService.getMasters(this.masterUrl)
    .subscribe((data: any) => {
      this.stockItems = data.vitems;
    });
  }
  ...

answered May 22, 2024 at 20:51

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

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

Collectives™ on Stack Overflow

Provided data source did not match an array, Observable, or DataSource Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related