Angular, REST-API Json Object, Access Specific Array with SubObjects

Question

I have the following Problem in my Angular Project. I get the following Data (example Data) from our API:

    {
  "plant": [
    {
      "workplateId": 0,
      "workplaceTypeId": 0,
      "description": "string",
      "aktiveOrder": 0,
      "spsActive": true,
      "plantActive": true,
      "plantStatus": 0,
      "orderManagementActive": true,
      "Cycle": 0
    },
    {
      "workplateId": 1,
      "workplaceTypeId": 0,
      "description": "string",
      "aktiveOrder": 0,
      "spsActive": false,
      "plantActive": false,
      "plantStatus": 0,
      "orderManagementActive": true,
      "Cycle": 0
    }
  ],
  "productFig": {
    "earlyShift": [
      {
        "plantId": 0,
        "shiftId": "string",
        "quant101": 0,
        "sqm101": 0,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      },
      {
        "plantId": 1,
        "shiftId": "string",
        "quant101": 100,
        "sqm101": 1000,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      }
    ],
    "lateShift": [
      {
        "plantId": 0,
        "shiftId": "string",
        "quant101": 0,
        "sqm101": 0,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      },
      {
        "plantId": 1,
        "shiftId": "string",
        "quant101": 2000,
        "sqm101": 20000,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      }
    ],
    "nightShift": [
      {
        "plantId": 0,
        "shiftId": "string",
        "quant101": 0,
        "sqm101": 0,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      }
    ]
  }
}

Iam storing the data in a property from type Data[]. The Data type is an interface. This works without a problem and I can access the whole data here in my component.ts:

 this.store.pipe(select(getAllData)).
     subscribe(data => {
       this.data = data;
      console.log(data);
     });

But when i try to access it in my html I get the following error:

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

My implementation is:

<ov-plant *ngFor="let p of data"></ov-plant>

I need to access the plant array from datta, so the first array from data. It might be a simple issue for you guys, but I hope someone can lend me a hand :).

Thanks in Advance!

Your data variable is an object but ngFor expects something that can be iterated. Try *ngFor="let p of data.plant" — The Head Rush
– The Head Rush, Commented Feb 27, 2020 at 16:40

Natixco · Accepted Answer · 2020-02-27 16:31:16Z

3

It's because your data is an object and you can't iterate through an object. You need to specify an array inside it. For example:

<ov-plant *ngFor="let p of data['plant']"></ov-plant>

answered Feb 27, 2020 at 16:31

Natixco

6596 silver badges20 bronze badges

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

1 Comment

TheBadBossy Over a year ago

Works like a Charm! Sometimes we are just blind. Thank you!

AliF50 · Accepted Answer · 2020-02-27 16:31:07Z

0

You have to set this.data to the array in question.

Try:

this.store.pipe(select(getAllData)).
     subscribe(data => {
       this.data = data.plant;
      console.log(data);
     })

answered Feb 27, 2020 at 16:31

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

Comments

Jonathan Stellwag · Accepted Answer · 2020-02-27 19:17:44Z

0

You can join your data array via pluck. You will keep all type informations with it and don't have to do any logic in your html.

this.store.pipe(
  select(getAllData),
  pluck('plant')
).subscribe(value => this.data = value);

edited Feb 27, 2020 at 19:17

answered Feb 27, 2020 at 17:53

Jonathan Stellwag

4,3055 gold badges30 silver badges58 bronze badges

Collectives™ on Stack Overflow

Angular, REST-API Json Object, Access Specific Array with SubObjects

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related