Typescript identifier names can't start with numbers

Question

I have been making a project which uses this api : https://api.coinmarketcap.com/v1/ticker/

It is built using angular2. This api returns an array of dictionaries where one key is "24h_volume_usd". As the name starts with a number it is not accepted in typescript if i use it directly. I am new to typescript (and javascript too) thus i can't figure out how to do it.

Api result looks like this :

[
    {
        "id": "bitcoin", 
        "name": "Bitcoin", 
        "symbol": "BTC", 
        "rank": "1", 
        "price_usd": "9292.8", 
        "price_btc": "1.0", 
        "24h_volume_usd": "7830770000.0", <----- This key-value pair
        "market_cap_usd": "158006054554", 
        "available_supply": "17003062.0", 
        "total_supply": "17003062.0", 
        "max_supply": "21000000.0", 
        "percent_change_1h": "1.77", 
        "percent_change_24h": "0.04", 
        "percent_change_7d": "5.46", 
        "last_updated": "1524906276"
    }, 

My component.ts file is :

import { Component, OnInit } from '@angular/core';
import { CrypdataService } from '../crypdata.service'

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  providers: [CrypdataService],
})
export class TableComponent implements OnInit {

  private currency=[];

  constructor( private crypdataservice: CrypdataService ) { }

  ngOnInit() {
  this.crypdataservice.getall().subscribe(data => this.currency = data);
  }

}

And corresponding html file is :

<div class="table-responsive">
<table class="table table-striped table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Market Cap</th>
      <th scope="col">Price (USD)</th>
      <th scope="col">Price (BTC)</th>
      <th scope="col">Circulating Supply</th>
      <th scope="col">Volume (24h)</th>
      <th scope="col">% 1h</th>
      <th scope="col">% 24h</th>
      <th scope="col">% 7d</th>
    </tr>
  </thead>
  <tbody>


    <tr *ngFor="let curr of currency">
      <th scope="row">{{ curr.rank }}</th>
      <td>{{curr.name}}</td>
      <td>{{curr.symbol}}</td>
      <td>{{curr.market_cap_usd}}</td>
      <td>{{curr.price_usd}}</td>
      <td>{{curr.price_btc}} </td>
      <td>{{curr.available_supply}} </td>
      <td>{{curr.24h_volume_usd}} </td>    // does not work
      <td>{{curr.percent_change_1h}} </td>
      <td>{{curr.percent_change_24h}}</td>
      <td>{{curr.percent_change_7d}} </td>

    </tr>

  </tbody>
</table>
</div>

Thanks for reading

Answer 1

It's work definitely

<div class="table-responsive">
    <table class="table table-striped table-hover">
      <thead class="thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">Name</th>
          <th scope="col">Symbol</th>
          <th scope="col">Market Cap</th>
          <th scope="col">Price (USD)</th>
          <th scope="col">Price (BTC)</th>
          <th scope="col">Circulating Supply</th>
          <th scope="col">Volume (24h)</th>
          <th scope="col">% 1h</th>
          <th scope="col">% 24h</th>
          <th scope="col">% 7d</th>
        </tr>
      </thead>
      <tbody>


        <tr *ngFor="let curr of currency">
          <th scope="row">{{ curr.rank }}</th>
          <td>{{curr.name}}</td>
          <td>{{curr.symbol}}</td>
          <td>{{curr.market_cap_usd}}</td>
          <td>{{curr.price_usd}}</td>
          <td>{{curr.price_btc}} </td>
          <td>{{curr.available_supply}} </td>
          <td>{{curr['24h_volume_usd']}} </td>    // it's work
          <td>{{curr.percent_change_1h}} </td>
          <td>{{curr.percent_change_24h}}</td>
          <td>{{curr.percent_change_7d}} </td>

        </tr>

      </tbody>
    </table>
    </div>

Answer 2

should be

<td>{{curr['24h_volume_usd']}} </td>