Как парсить Map (JSON) в Angular?

Есть фронт на Angular который отправляет запрос:

{"method":"limit_objects","id":"req-id-01","jsonrpc":"2.0"}

и получает ответ:

{"result":{"object_1":"10000","object_2":"20000","object_3":"15000","object_4":"15000"},"id":"req-id-01","jsonrpc":"2.0"}

Вот код который это выполнят на фронте:

class Limit {
  id: any;
  limitMap: Map<string, string>;
  constructor(id: any, result: Map<string, string>) {
    this.id = id;
    this.limitMap = result;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  url = 'http://dc1-kafka-utils01.awis.np.ua:9098/rpc';
  response: any;
  limits: Limit;
  title: string;
  loggedIn = true;

  constructor(public http: HttpClient){}

  getLimits() {
    this.response = this.http.post(this.url, '{"method":"limit_objects","id":"req-id-01","jsonrpc":"2.0"}')
      .subscribe((response) => {
        this.response = response;
        this.limits = (response as Limit);
        console.log(this.limits.id);
      });
  }
}

попытка вывести в браузер:

<button (click)="getLimits()">Button</button>

<p *ngFor="let item of limits.limitMap">
    {{item}}
</p>

но получаю ошибку ERROR TypeError: Cannot read property 'limitMap' of undefined

Собственно вопрос, как правильно распарсить весь JSON response, и в частности Map (поле result в JSON)?


Ответы (1 шт):

Автор решения: NocteFury

Ты сделал все правильно. Возможно дело в том, что на момент построения списка, объект еще не готов, ведь запрос асинхронный, так еще и заполняется по клику.

Чтобы ошибка не появлялась, попробуй после limits в разметке указать вопросительный знак: limits?.limitMap.

→ Ссылка