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?

Please show how you are trying to render the data in the template. This error is coming from the template. — Alexander Staroselsky
– Alexander Staroselsky, Commented Jan 6, 2019 at 23:30
Possible duplicate of Error trying to diff '[object Object]' — Keenan Diggs
– Keenan Diggs, Commented Jan 6, 2019 at 23:34

Milad · Accepted Answer · 2019-01-07 00:21:00Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related