Циклически перебирайте ключи JSON, чтобы соответствовать вводу, затем выводите значение ключа, используя угловой 6

Question

Я новый разработчик, работающий с angular впервые. Я пытаюсь перебрать данные из файла JSON в моем приложении (пока что это очень просто) для сопоставления с двумя полями ввода: первый ввод для сопоставления с объектом, второй для сопоставления с ключом в указанном объекте, а затем, наконец, для вывода значение ключа.

Это мой файл data.json

{
 "0.5t": {
   "7m": "20t",
   "8m": "20t",
   "9m": "20t",
   "10m": "20t",
   "12m": "20t",
   "14m": "20t",
   "16m": "20t",
   "18m": "20t",
   "20m": "20t",
   "22m": "20t",
   "24m": "25t",
   "26m": "25t",
   "28m": "35t",
   "30m": "35t",
   "32m": "50t",
   "34m": "50t",
   "36m": "70t",
   "38m": "70t",
   "40m": "80t",
   "42m": "80t",
   "44m": "80t",
   "46m": "90t",
   "48m": "120t",
   "50m": "120t",
   "52m": "120t",
   "54m": "120t"
   },
 "1t": {
   "7m": "20t",
   "8m": "20t",
   "9m": "20t",
   "10m": "20t",
   "12m": "20t",
   "14m": "20t",
   "16m": "20t",
   "18m": "20t",
   "20m": "25t",
   "22m": "25t",
   "24m": "35t",
   "26m": "35t",
   "28m": "50t",
   "30m": "50t",
   "32m": "60t",
   "34m": "70t",
   "36m": "70t",
   "38m": "70t",
   "40m": "80t",
   "42m": "80t",
   "44m": "90t",
   "46m": "100t",
   "48m": "120t",
   "50m": "120t",
   "52m": "120t",
   "54m": "120t"
   },
 "2t": {
   "7m": "20t",
   "8m": "20t",
   "9m": "20t",
   "10m": "20t",
   "12m": "20t",
   "14m": "20t",
   "16m": "25t",
   "18m": "25t",
   "20m": "35t",
   "22m": "35t",
   "24m": "50t",
   "26m": "50t",
   "28m": "60t",
   "30m": "60t",
   "32m": "70t",
   "34m": "80t",
   "36m": "80t",
   "38m": "80t",
   "40m": "90t",
   "42m": "100t",
   "44m": "100t",
   "46m": "120t",
   "48m": "120t",
   "50m": "160t",
   "52m": "160t",
   "54m": "160t"
  }

}

my service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Injectable({
     providedIn: 'root'
    })
    export class DataService {

     constructor(private httpService: HttpClient) {   }

     configUrl = '../assets/data.json';

     getCrane() {
      return this.httpService.get(this.configUrl);
     }

    }

calculator.component.ts Вот где у меня проблема.

    import { Component, OnInit } from '@angular/core';
    import { DataService } from '../data.service';

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


    public num1 :string;
    public num2 :string;
    public result :string;

    cal_crane() {
    this.num1 = this.num1 + 't';
    this.num2 = this.num2 + 'm';
    }

    data;

    constructor(private myService: DataService) { }

    ngOnInit() {
      this.myService.getCrane().subscribe(res => this.data = res);
      }

    }

файл component.html В основном два входа и результат.

    <h1>Crane Calculator App</h1>

    <input [(ngModel)]='num1' type="number" name="num" placeholder="Weight 
     to be lifted ">
    <input [(ngModel)]='num2' type="number" name="num" 
     placeholder="Distance from crane "><br><br>

    <button (click)='cal_crane()'>Get your Crane </button>

    <br>
    <br>
    <h2>{{result}}</h2>

Правильно ли я поступаю?