How to display data of object in typescript html when object property starts with numeric value (digit)

user_9462484 0
Viewed 1486

I have following function in the typescript file to get data from API.

.ts file

getMachineConfigsByid(id) {
    this.machinesService.getMachineConfigById(id).subscribe((res) => {
      if (res.status === 'success') {
        this.configs = res.histories;
        let data = _.groupBy(this.configs, 'config_type');
        this.led = data.led;
      } else {
        this.toastr.error(res.message, 'Error !');
      }
    }, (err) => {
      console.log(err);
    });
  }

The data of led array look like this

[
   {
      "id":37,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T14:53:04.727+05:30",
      "updated_at":"2020-02-20T14:53:04.727+05:30"
   },
   {
      "id":80,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:09:31.488+05:30",
      "updated_at":"2020-02-20T15:09:31.488+05:30"
   },
   {
      "id":82,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:17:21.896+05:30",
      "updated_at":"2020-02-20T15:17:21.896+05:30"
   },
   {
      "id":83,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:19:41.532+05:30",
      "updated_at":"2020-02-20T15:19:41.532+05:30"
   },
   {
      "id":84,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:25:55.948+05:30",
      "updated_at":"2020-02-20T15:25:55.948+05:30"
   }
]

Now displaying this data stored in led array in HTML file as following.

.html

  <div *ngFor="let item of led">
    <div class="mb-4 section-header-configuration">
      <p class="mb-0"><b>LED Config</b>
        <span class="float-right">
          <p class="mb-0"><b>On : {{item?.created_at | date:'dd/MM/yyyy'}}</b></p>
        </span>
      </p>
    </div>
    <div>
      <div class="mb-3 col-12">
        <span class="mr-2 wdth-200">24 V LED:</span>
        <span class="status d-inline-block">
         {{item?.description?.24v_led ? 'Yes' : 'No' }}
        </span>
      </div>
    </div>
  </div>

but it gives the following error as it's not able to interpolate the string stored inside object which starts with a digit

core.js:7187 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Unexpected token 24, expected identifier or keyword at column 20 in [ {{item?.description?.24v_led ? 'Yes' : 'No' }} ] in ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48 ("       <span class="mr-2 wdth-200">24 V LED:</span>
            <span class="status d-inline-block">[ERROR ->]
              {{item?.description?.24v_led ? 'Yes' : 'No' }}
            </span>
          </div>
"): ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48
Parser Error: Unexpected token 24, expected identifier or keyword at column 20 in [ {{item?.description?.24v_led ? 'Yes' : 'No' }} ] in ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48 ("
    </div>
angular typescript
1 Answers

You can access the properties of an object by thinking of it as a string index in an array-like object. object['value'] is equivalent to object.value. This is known as bracket notation.

So you could do:

{{item?.description && item?.description['24v_led'] ? 'Yes' : 'No' }}

Unfortunately, I don't think it's possible to combine typescript's optional chaining with this method of accessing properties, or at least I couldn't get it to work in my demo.

DEMO: https://stackblitz.com/edit/angular-cqkbmk

Edit:

As the other answer states, it should theoretically be possible to combine the two, but it doesn't work for me in stackblitz. Not to say that it's not possible though.

user_53679160
Related