Как парсить 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.