Looking to optimize performance in your Angular 2 app with immutable.js?
Although my app is functioning properly, I am aiming to enhance its performance through optimization and refactoring. I recently discovered immutable.js and want to convert the data retrieved from an HTTP request into immutable data before utilizing it in an Angular *ngFor loop.
While I can see the data returned by doing a console log, I am encountering difficulties when attempting to map the data to an immutable object. The structure I'm seeing is map->rout->entries->Array[]->Array[], and my data is located in the last array element. How can I access it properly?
// component.ts
import { Component, OnInit} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import { List, Map } from 'immutable';
import * as Immutable from 'immutable';
@Component({
selector: 'app',
templateUrl: './component.html',
styleUrls: ['./component.css'],
})
export class MyComponent implements OnInit {
let myData:any = null;
constructor(private http: Http) {
this.callData("test.json");
}
callData(targetUrl) {
return this.http.get(targetUrl))
.map((res) => res.json())
.subscribe(
(data) => {
this.myData = [];
this.myData = Immutable.Map(data);
console.log(data); // RETURNS THE DATA
console.log(this.myData); // RETURNS MAP
});
}
}
// component.html
<div *ngIf="myData != null">
<div *ngFor="let key of myData; let i = index">
<div class="someClass">
{{myData[key].something}}
</div>
</div>
</div>