Angular 2 accessing value in an array - arrays

Question

Component:
import { Component, OnInit } from '#angular/core';
import * as _ from "lodash";
import { AF } from '../angularfire.service';
#Component({
selector: 'app-record-chart',
templateUrl: './record-chart.component.html',
styleUrls: ['./record-chart.component.less']
})
export class RecordChartComponent implements OnInit {
currentUser = [];
userRecords = [];
topRecords = [];
topRecordLabels = [];
movements = [
"Back Squat",
"Bench Press",
"Clean",
"Clean & Jerk",
"Deadlift",
"Front Squat",
"Jerk",
"Power Clean",
"Power Snatch",
"Push Press",
"Snatch",
"Strict Press"
];
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels = this.topRecords[0];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
constructor(private afService: AF) {
// Get current user details.
afService.getCurrentUserInfo().then(currentUserDetails => {
this.currentUser.push(currentUserDetails);
}).then(() => {
// Populate lifts array
for(let movement of this.movements) {
this.afService.getRecords(movement, this.currentUser[0].userID).subscribe((data) => {
var sortedArray = _.orderBy(data, ['weight']);
var sortedArray2 = _.uniqBy(sortedArray,'weight');
// console.log(sortedArray2);
this.userRecords.push(sortedArray);
var newRecords = sortedArray
.filter(function(record) {
return sortedArray.find(function(innerRecord) {
return innerRecord.name === record.name && innerRecord.weight > record.weight; }) === undefined;
});
for (let record of newRecords) {
this.topRecords.push(record);
}
});
}
}).then(() => {
// console.log(this.topRecords);
for (item in this.topRecords) {
this.topRecordLabels.push(item.movement);
}
console.log(this.topRecords);
})
}
ngOnInit() {
}
}
this.topRecords Array output:
How do I iterate through every object in this array and push all of the movement values into their own array? I thought I would be able to access them individually with this.topRecords[0] in a for loop, but it always returns a length of 0.
This is what I thought would work:
for (item in this.topRecords) {
this.topRecordLabels.push(item.movement);
}
But it makes 0 iterations. I'm stuck on figuring out how to access and cycle through the objects of this array.

Answer 1

You can iterate through the array with the map operator and then return another array for your field like this:
this.topRecordLabels = this.topRecords.map((item)=> item.movement);
Example usage: https://jsfiddle.net/echonax/n0e0qxng/

Answer 2

Please remove this line first :
public barChartLabels = this.topRecords[0];
This doesn't make nay sense.
You need to read the differnce b/w for in and for of
Replace your code with :
for (let item of this.topRecords) {
this.topRecordLabels.push(item.movement);
}
For more information , please checkout the link :
What is the difference between ( for... in ) and ( for... of ) in javascript?

Answer 3

#echonax figured this out:
this.topRecordLabels = this.topRecords.map((item)=> item.movement)