iteration over object of object

Question

I have the following structure

[
  {
    "name": null
    "match": [{
                 "id": 0,
                 "location": ""

             "awayTeam": {
                     "id": 1568,
                     "teamName": "Manly United" },
                 "homeTeam": {
                     "id": 1523,
                     "teamName": "Sydney FC Youth" },
                     "matchDataProvider": [{
                            "id": 2953046,
                         "updatedDate": null }],
                 "matchPunditPrediction": [],
                 "matchResult": null,
                     "userMatchPrediction": []
               }]
   }
]

I need to iterate over the match element and retrieve properties

is the structure constant? as there is outside array. Will there be multiple objects that you want to iterate over all of them? — Muhammad Kamran, May 28 '19 at 13:17
Hi, Yes the match element will be constant. I have only described one element — user1572257, May 28 '19 at 13:22

Muhammad Kamran · Answer 1 · 2019-05-28T13:45:31.173

1

You can do by: arr = your full array.

arr.forEach(obj => {
  obj.match.forEach(m => {
    // This contains the match object.
    console.log(m);
    console.log(m.id);
  })
})

For html.

<div *ngFor="let item of myData">
  <div *ngFor="let match of item.match | json"> {{ match }} </div>
</div>

edited May 28 '19 at 13:45

answered May 28 '19 at 13:25

Muhammad Kamran

978
6
10

Hi I need to use this in a component in angular. Can you show the syntax – user1572257 May 28 '19 at 13:29
Can you show me the code from your component.ts? Do you want to display the data in your template? – Muhammad Kamran May 28 '19 at 13:30
{{item.key}}:{{item.value}} – user1572257 May 28 '19 at 13:42
This is what i have so far. – user1572257 May 28 '19 at 13:43
I updated the answer. {{ match }} is the final match object of each iteration. – Muhammad Kamran May 28 '19 at 13:45
sorry I get this error message Cannot find a differ supporting object – user1572257 May 28 '19 at 13:51
Can you add the code of how the myDate is being populated? – Muhammad Kamran May 28 '19 at 13:53
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194055/discussion-between-user1572257-and-muhammad-kamran). – user1572257 May 28 '19 at 14:27

score 1 · Answer 2 · answered May 28 '19 at 16:15

I had the same array structure.In normal java logic we know that,we can element value by iterating two times for loop.So I tried to do same .I tried to write ngFor to iterate first array but I got the error as Found [object] instead of [Object object].Well this is surely not our fault but angulars ngFor loop only work with a proper array structure,it throws error when you iterate such kind of array structure.

After So many research I found one hack,

In your component file just write below code.

hack(val) {
    return Array.from(val);
  }

This will make array upon array. Magic is ,Angular finds this as proper array structure and it will not give error after.

Now when you write ngFor in html ,just write like this.

*ngFor="let variablename of hack(arrayObjectname)"

after this, if you need to write ngFor again for inside array,you still can write now :).This hack might show error in your code platform but it will run fine in browser.

I hope this will help you to solve your issue :)

iteration over object of object

2 Answers2