ERROR Error: "Error trying to diff '[object Object]'. Only arrays and iterables are allowed (API Laravel and front-end angular 7)

Question

I am consuming a JSON response in Laravel, but return is object e not array. What I have to do? Could anyone guide? I am getting error, cant figure out why?? Below is code

Laravel

public function show($id)
    {

        $arCategoria = \App\Favorito::join('categoria', 'categoria.cd_categoria', '=', 'link.cd_categoria')
        ->select('*')
        ->where('categoria.cd_categoria_pai',$id)
        ->where('link.cd_usuario',$this->token['cd_usuario'])
        ->where('link.bo_ativo',true)
            ->get();
        $link = $this->processarCategoria($arCategoria);
        return $link;
    }
    public function processarCategoria($arCategoria){
        $ar = array();
        $cont = 0;
        foreach($arCategoria as $key => $value){
            $ar[$value['no_categoria'].'_'.$value['cd_categoria']][] =  array(
                'no_link'=>$value['no_link'],
                'cd_link'=>$value['cd_link'],
                'vl_link'=>$value['vl_link'],
                'bo_ativo'=>$value['bo_ativo'],
                'link'=>$value['link']
            );

           $cont++;
        }

        return $ar;
    }

my return of laravel api

{
    "Documentation_3": [
        {
            "no_link": "stackoverflow",
            "cd_link": 5,
            "vl_link": null,
            "bo_ativo": 1,
            "link": "https://stackoverflow.com"
        },
        {
            "no_link": "Adventures of Time",
            "cd_link": 9,
            "vl_link": null,
            "bo_ativo": 1,
            "link": "http://adventuresoftime.com.br"
        }
    ],
    "Things to buy_5": [
        {
            "no_link": "Games",
            "cd_link": 10,
            "vl_link": null,
            "bo_ativo": 1,
            "link": "Games.com.br"
        }
    ]
}

and my service.ts

getLinksByIdusuario(id:number):Observable<any[]> {
    return this.http.get<any[]>(`${API}/favorito/${id}`)
    .pipe(map((data: any) => data ), 
                catchError(error => { return throwError(error)})
          );
  }

component.ts

ngOnInit() {


    this.id = params['id'];
    this.homeService.getLinksByIdusuario(this.id)
    .subscribe(
      categorias => {
        this.categorias = categorias,
        console.log(this.categorias)
      }
    )
}

component.html

<div class="row">
    <div *ngFor="let categoria of categorias">
        {{categoria |json}} 
    </div>
</div>

should I change my laravel backend or angular frontend? how to solve this problem?

Answer 1

You're trying to loop over an object, which is not possible in Angular 2+ 4 and 5.

Some of your options :

1- Ask your backend to convert it to an array :

[
    {

     "key":"Documentation_3",
     "value": [
        {
            "no_link": "stackoverflow",
            "cd_link": 5,
            "vl_link": null,
            "bo_ativo": 1,
            "link": "https://stackoverflow.com"
        },
    ],
   },
   {   
      "key":"Things to buy_5",
       "value" : [
        {
            "no_link": "Games",
            "cd_link": 10,
            "vl_link": null,
            "bo_ativo": 1,
            "link": "Games.com.br"
        }
    ]

    }

]

2- You can create a object key pipe or if you have angular6+, you can use a key-value pipe

<div *ngFor="let category of categorias | keyvalue"> {{category.key}}:{{category.value}} ===>> this is an array , so you need another loop here </div>