Can not acces array from model in Angular

Question

I've been trying to acces an array from my object. This is my class:

export class Competence {
private _id: string;
private _name: string;
private _isFinished: boolean;
private _subCompetences: string[];


constructor(name: string, isFinished: boolean, subCompetences: string[]) {
    this._name = name;
    this._isFinished = isFinished;
    this._subCompetences = subCompetences;
}

With the getters and setters aswell.

I've been trying to call the subCompetences from a Competence object in this code:

export class StudentModuleDetailsComponent implements OnInit {


private competences: Competence[] = [];
private subcompetences: SubCompetence[] = [];

constructor() { }

ngOnInit() {
   this.getData()
 }
private showSubCompetences(competence: Competence) {
    this.chosenSubCompetences = [];
    console.log(competence.subCompetences)

the showSubCompetences() method gets called with a click event and the clicked competence is given as a parameter.

The competence object is initialized in this method that works perfectly fine.

private getData() {
 this._apiModulesDataService.getModuleById(this._studentDataService.moduleId).subscribe(
  data => {
    this._apiModulesDataService;
    var self = this;
    this.module = data[0];

    this.module.competences.forEach(function (comp) {
      self._apiCompetenceDataService.getCompetenceById(comp).subscribe(
        c => {
          if (!self.competences.includes(c)) {
            self.competences.push(c[0]);
          }
        }
      );
    });
  });
 }
}

Now when I click the competence it only prints out undefined.

And when I only print the competence like so

console.log(competence)

I get this Json as output

{id: "f39356b0-e2a9-11e8-858b-23856324831a", isfinished: null, name: 
 "Knippen", subcompetences: Array(2)}
  id: "f39356b0-e2a9-11e8-858b-23856324831a"
  isfinished: null
  name: "Knippen"
  subcompetences: Array(2)
    0: "08638e20-e2aa-11e8-858b-23856324831a"   
    1: "0d772570-e2aa-11e8-858b-23856324831a"
   length: 2

How do i fix this?

oh and the subCompetences are initialized in a backend, If I print my Competence object, I can see the array of subcompetences — Vital Verleyen
– Vital Verleyen, Commented Nov 17, 2018 at 23:28
subcompetences != subCompetences. What do you get when you write console.log(subcompetences)? — miselking
– miselking, Commented Nov 17, 2018 at 23:39
if you write an answer where you tell me to change the model and use subcompetence instead of subCompetence, I'll check it as a correct answer :) — Vital Verleyen
– Vital Verleyen, Commented Nov 17, 2018 at 23:45

miselking · Accepted Answer · 2018-11-17 23:49:01Z

1

Hmm, first I suggest fixing your model in order to avoid any future errors:

export class Competence {
    private _id: string;
    private _name: string;
    private _isfinished: boolean;
    private _subcompetences: string[];

    constructor(name: string, isFinished: boolean, subCompetences: string[]) {
        this._name = name;
        this._isfinished = isFinished;
        this._subcompetences = subCompetences;
    }

    ...
}

Then, try logging subcompetences like this:

console.log(competence.subcompetences)

Also, with new model you should be able to properly get isfinished property as well...

Hope this helps.

answered Nov 17, 2018 at 23:49

miselking

3,1034 gold badges32 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Can not acces array from model in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related