Angular 2 accessing value in an array

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)