ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

My API link is working. But, the api call in my service shows me an error message. please help me

{ "success": true, "data": [ { "_id": "1", "description": "Belwelne ej.", "createdAt": "2051-09-25", "updatedAt": "2089-11-11", "montant": 165, "date": "2023-06-18" },

.ts
import { Component, OnInit } from '@angular/core';
import { Budget } from '../budget';
import { CanonicApiService } from '../canonic-api.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-get-all-api',
  templateUrl: './get-all-api.component.html',
  styleUrls: ['./get-all-api.component.sass']
})
export class GetAllApiComponent implements OnInit {

  budgets: Budget[] = [];

  constructor(private canonicApiService: CanonicApiService, private router: Router) { }

  ngOnInit(): void {
    this.getBudgets()
  }
    
  getBudgets() : void {
    this.canonicApiService.getBudgets()
    .subscribe(resultat => this.budgets = resultat)
  }

service/api

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Budget } from './budget';


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }), 
  Header: "Authorization: [apiKey]"

};


@Injectable({
  providedIn: 'root'
})
export class CanonicApiService {
  budgetsUrl = 'Url-Api';

  constructor(private http: HttpClient) { }

  // * fonction display liste of budgets

  getBudgets(): Observable<Budget[]> {
  return this.http.get<Budget[]>(this.budgetsUrl);