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
– Vivek Doshi, Commented Jun 17, 2017 at 10:48
Can you try this.topRecordLabels = this.topRecords.map((item)=> item.movement) ? Example: jsfiddle.net/echonax/n0e0qxng — eko
– eko, Commented Jun 17, 2017 at 11:13

eko · Accepted Answer · 2017-06-17 11:27:39Z

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, 2017 at 11:27

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vivek Doshi Over a year ago

whats the issue in my answer ?

eko Over a year ago

@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.

Vivek Doshi · Accepted Answer · 2017-06-17 10:55:54Z

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, 2017 at 10:55

answered Jun 17, 2017 at 10:50

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

7 Comments

Joe Berthelot Over a year ago

It still makes 0 iterations. I add console.log("test") inside the for loop and it never gets output in the console.

Vivek Doshi Over a year ago

Do you have plunker for this ?

Vivek Doshi Over a year ago

Whats the output of the console.log(this.topRecords); in last then?

Joe Berthelot Over a year ago

The exact screenshot I posted is that log.

Vivek Doshi Over a year ago

Do your last then function ever called ?

|

Joe Berthelot · Accepted Answer · 2017-06-17 11:27:04Z

0

@echonax figured this out:

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

answered Jun 17, 2017 at 11:27

Joe Berthelot

7354 gold badges17 silver badges33 bronze badges

1 Comment

Vivek Doshi Over a year ago

whats the issue in my answer ? both does the same thing

Collectives™ on Stack Overflow

Angular 2 accessing value in an array

3 Answers 3

2 Comments

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related