Print array of objects

Question

I want to print an array of objects on my template but I'm getting some problems trying to do it. This is the json on which theres the array historico

{
      "id": 2,
      "tipo_negociacao": "Cobrança",
      "historico": [
        {
          "fl_usuario": "",
          "created_at": "",
          "updated_at": "",
          "created_by": null,
          "updated_by": null,
          "texto": "Proposta realizada valor de R$666666666"
        },
        {
          "texto": "Proposta no valor de R$:5762recusada"
        },
        {
          "texto": "Proposta realizada valor de R$6750"
        },
    }

So, as you can see, historicois an array of objects and what I want to do is to print all texto values on the screen. This is the part of the template where I try to print it:

<div *ngFor="let historico of disputa">
  <p> Negociação não iniciada </p>
  <p *ngFor="let historico of disputa.historico"> {{historico.texto}} </p>
</div>

Im using this to use data from disputa:

this.route.params.subscribe(params =>{
  let id = params['id'];
  this.service
  .buscaPorId(id)
  .subscribe(disputa => {
    this.disputa = disputa;
  },
  erro => console.log(erro));
})

Im getting this error:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Can someone help me? Thanks in advance

You have a typo... let historico of disputas should be disputa that's the name of the array. Update: and be careful about the naming of your variables, the first variable in which you save disputas it's fine but I think the second one will cause conflict — Alex
– Alex, Commented Apr 7, 2017 at 21:10
thanks for the tip, I've updated the question since even without the typo I'm still having problems trying to print it — Renê Silva Lima
– Renê Silva Lima, Commented Apr 7, 2017 at 21:15
I would be money that what you are getting from the buscaPorId(id) call is not an array. If you do a console.log(this.disputa)); after the service call, does show an array, or an object? — R. Richards
– R. Richards, Commented Apr 7, 2017 at 21:28
Yeah, I guess that's it, It's returning me an object because its a parametrized route where I only receive the "disputa` with the same id as the route — Renê Silva Lima
– Renê Silva Lima, Commented Apr 7, 2017 at 21:30

AVJT82 · Accepted Answer · 2017-04-08 07:41:41Z

1

The error you are getting is because of the outer ngFor you have:

<div *ngFor="let historico of disputa">

disputa is an Object, and cannot therefore be iterated.

Just remove that outer iteration and you are good to go, so your template should simply look like this:

<p *ngFor="let historico of disputa.historico"> {{historico.texto}} </p>

Here's a

Demo

answered Apr 8, 2017 at 7:41

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Comments

Sushanth -- · Accepted Answer · 2017-04-07 21:29:57Z

0

<p *ngFor="let historico of disputa.historico"> {{historico.texto}} </p>

is supposed to be

<p *ngFor="let data of historico.historico"> {{data.texto}} </p>

As historico variable in the first ngFor is already pointing to the current object in iteration.

// Or even better, change the name of the variable in the outermost loop
// so that you have the correct context in the inner loop.

<div *ngFor="let data of disputa">  <--- historico is already in context
  <p> Negociação não iniciada </p>
  <p *ngFor="let historico of data.historico"> {{historico.texto}} </p>
</div>

Update

There might be a possibility, that angular is not recognizing that the incoming data is array. Explicitly try to convert it to an array before piping it in.

<p *ngFor="let historico of convertToArray(data.historico)"> {{historico.texto}} </p>

In your component.

convertToArray(arrayObj) {
  return Array.from(arrayObj);
}

edited Apr 7, 2017 at 21:29

answered Apr 7, 2017 at 21:16

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

5 Comments

Renê Silva Lima Over a year ago

thanks for the answer but I'm getting the same error "Cannot find a differ..."

Renê Silva Lima Over a year ago

Sorry, what I was sending is an object, but I want to access the array that is inside of this object. do you have any idea how i can do this?

Sushanth -- Over a year ago

In the above case disputa is an array of objects, in which the first index ( object ) is assigned to data. Then when it comes to the 2nd loop, you want to access the array which is is data.historico. Instead of directly passing it to ngFor convert it to an array explicitly.

Renê Silva Lima Over a year ago

I tried what you answer, I'm not getting the error anymore, however it does'nt print anything

Renê Silva Lima Over a year ago

disputa is actually an object, what I want is to print the array historico that is inside disputa

Collectives™ on Stack Overflow

Print array of objects

2 Answers 2

Demo

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related