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.

Where are you trying to loop this code ? for (item in this.topRecords) { this.array.push(item.movement); } — Vivek Doshi, Jun 17 '17 at 10:48
Can you try `this.topRecordLabels = this.topRecords.map((item)=> item.movement)` ? Example: https://jsfiddle.net/echonax/n0e0qxng/ — eko, Jun 17 '17 at 11:13

score 2 · Accepted Answer · answered Jun 17 '17 at 11:27

2

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/

answered Jun 17 '17 at 11:27

eko

39,722
10
72
98

whats the issue in my answer ? – Vivek Doshi Jun 17 '17 at 12:03
@VivekDoshi I don't seen an issue in your answer but since OP said `item in this.topRecords` makes 0 iterations, so would `item of this.topRecords` that's why I proposed a different solution. – eko Jun 17 '17 at 12:12

Vivek Doshi · Answer 2 · 2017-06-17T10:55:54.647

0

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?

edited Jun 17 '17 at 10:55

answered Jun 17 '17 at 10:50

Vivek Doshi

56,649
12
110
122

It still makes 0 iterations. I add console.log("test") inside the for loop and it never gets output in the console. – Joe Berthelot Jun 17 '17 at 10:53
Do you have plunker for this ? – Vivek Doshi Jun 17 '17 at 10:54
Whats the output of the console.log(this.topRecords); in last then? – Vivek Doshi Jun 17 '17 at 10:56
The exact screenshot I posted is that log. – Joe Berthelot Jun 17 '17 at 10:58
Do your last then function ever called ? – Vivek Doshi Jun 17 '17 at 11:00
Well yeah, or else I would've even get that console.log to work. – Joe Berthelot Jun 17 '17 at 11:02
Need to check it live , or please set the plunker for this. – Vivek Doshi Jun 17 '17 at 11:03

score 0 · Answer 3 · answered Jun 17 '17 at 11:27

0

@echonax figured this out:

this.topRecordLabels = this.topRecords.map((item)=> item.movement)

answered Jun 17 '17 at 11:27

Joe Berthelot

725
4
16
33

whats the issue in my answer ? both does the same thing – Vivek Doshi Jun 17 '17 at 12:04

Angular 2 accessing value in an array

3 Answers3