How to access different properties in array of objects - each object has different keys

Question

I tried the below 2 options but both are not working.

JSON

{
   "Properties": [
                {
                    "Type": "LEI"
                },
                {
                    "Country": "DE"
                },
                {
                    "Name": "Credit Institution"
                }
            ]
}

Angular Typescript

Option #1

<ng-template pTemplate="body" let-entity>
  <tr>
    <td>{{entity.Properties[Type]}}</td>
    <td>{{entity.Properties[Country]}}</td>
    <td>{{entity.Properties[Name]}}</td>
  </tr>
 </ng-template>

Option #2

<ng-template pTemplate="body" let-entity>
  <tr>
    <td>{{entity.Properties.Type}}</td>
    <td>{{entity.Properties.Country}}</td>
    <td>{{entity.Properties.Name}}</td>
  </tr>
 </ng-template>

Update:-

My real JSON

    {
    "_id": "5bcb2dbfe8ffdd1bd0913825",
    "_entitykey": "CRD_CRE_INS.CRDINSLEICODE",
    "_validfrom": "2018-10-20T13:31:35.040Z",
    "_validto": "2100-12-31T00:00:00.000Z",
    "_datahash": "84f28a3fed7d3a1e5e2b21e5bc91e8a1",
    "_payload": {
        "CA_OwnerID": "EU_ECB",
        "EntityCode": "CRDINSLEICODE",
        "EntityType": "CRD_CRE_INS",
        "Properties": [{
                "EEA_DEP_GUA_SCH": [
                    "IS_TIF",
                    "GB_FSCS"
                ]
            },
            {
                "ENT_AU": [
                    "2017-09-05",
                    "2018-10-05",
                    "2019-01-01"
                ]
            },
            {
                "ENT_COD_TYP": "LEI"
            },
            {
                "ENT_COU_RES": "DE"
            },
            {
                "ENT_NAM": "Credit Institution In Germany"
            },
            {
                "ENT_NAT_REF_COD": "REFCODE12342"
            },
            {
                "ENT_TOW_CIT_RES": "GERMAN TOWN1243"
            },
            {
                "INT_CAP_REQ_UND_ART_12": "ART_12_1_CRD"
            },
            {
                "TYP_UND_ACC_CRR_ART_27": "ART_27_1_A1_CRR"
            },
            {
                "IS_HID_NOT_PUB": "0"
            }
        ],
        "Services": [{
                "DE": [
                    "PS_010",
                    "PS_020",
                    "PS_03A",
                    "PS_03B"
                ]
            },
            {
                "GR": [
                    "PS_010",
                    "PS_020"
                ]
            }
        ]
    }
}

Just a note on naming: You're not "parsing" by key; you're accessing by key. Also, by the time it gets to your template, it's not JSON; it's just an object. — Heretic Monkey, Oct 22 '18 at 15:32
Possible duplicate of [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Heretic Monkey, Oct 22 '18 at 15:32

mhodges · Answer 1 · 2018-10-22T16:18:31.963

I think your best bet is to map the properties into a single structure and then you can access the properties as you want to.

The resulting structure would look like the following:

{
  "Type": "LEI",
  "Country": "DE",
  "Name": "Credit Institution"
}

So you will be accessing a single object instead of an array of objects with different properties, like so:

var entity = {
   "Properties": ([
      {
          "Type": "LEI"
      },
      {
          "Country": "DE"
      },
      {
          "Name": "Credit Institution"
      }
  ]).reduce((res, curr) => Object.assign(res, curr), {})
}

console.log(entity.Properties)

<ng-template pTemplate="body" let-entity>
  <tr>
    <td>{{entity.Properties.Type}}</td>
    <td>{{entity.Properties.Country}}</td>
    <td>{{entity.Properties.Name}}</td>
  </tr>
</ng-template>

Or, if you want to show all properties, you can do so dynamically, like so:

<ng-template pTemplate="body" let-entity>
  <tr>
    <td *ngFor="let key of entity.Properties">{{entity.Properties[key]}}</td>
  </tr>
</ng-template>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

I have created a sample application to bind property dynamically on stackblitz

Here is the component code.

data = {
   "Properties": [
                {
                    "Type": "LEI"
                },
                {
                    "Country": "DE"
                },
                {
                    "Name": "Credit Institution"
                }
            ]
}

columns:string[] = [];
ngOnInit(){
  for(let row of this.data.Properties){
    for(var columnName in row){
      this.columns.push(columnName)
    }
  }
}

Here is the Html Code.

<table>
  <tr *ngFor="let row of data.Properties; let i = index">
    <td >{{row[columns[i]]}}</td>
  </tr>
</table>

First you need to create a columns array and bind that in the html.

Please let me know if you have any question.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 22 '18 at 15:45

Ajay Ojha

380
1
3
9

This is working under the assumption that the OP wants the columns in the same order as the data is coming back, or that the data is coming back in the correct order and no other properties are included. – mhodges Oct 22 '18 at 15:47
this is working as expected. please let me know if you see any issue. if you want order then it should be managed from server. – Ajay Ojha Oct 22 '18 at 15:50
I didn't say it didn't work for the OP's stripped down example, all I said was it was working under the assumption that the data returned will be in exactly the right format for the UI. That can be a lofty assumption in many cases, especially if your data is coming from a third-party API. – mhodges Oct 22 '18 at 15:56
then please explain your cases, – Ajay Ojha Oct 22 '18 at 15:58
See the OP's updated question showing the real JSON data returned - that demonstrates my point exactly. – mhodges Oct 22 '18 at 15:59
dynamically this can be possible. but which field you want to show on ui in which format. please explain. so that I can help you out. – Ajay Ojha Oct 22 '18 at 16:02
@AjayOjha Thanks all fields mate – Jay Oct 22 '18 at 16:15

How to access different properties in array of objects - each object has different keys

2 Answers2