Olusegun Odumosu Olusegun Odumosu - 2 years ago 76
Javascript Question

can use service inside a foreach()

import { Component, Input, Output, OnInit, OnChanges } from '@angular/core';
import { ViewComponent } from '../view/view.component';
import { HitoService } from '../../services/hito.service';

@Component({
selector: 'app-time-line',
templateUrl: './time-line.component.html',
styleUrls: ['./time-line.component.css'],
providers: [HitoService]
})

export class TimeLineComponent implements OnChanges, OnInit {
@Input() calbuscador: String;
@Input() idcalbuscador: String;
public pepe: String
nom_cal1: any;
hito1: any = {};
hito2: any = {};

constructor(public _hitoService: HitoService) {
}

ngOnInit() {
}
///we retrieve the value sento to this component in OnChanges
ngOnChanges() {

this.nom_cal1 = this.calbuscador;
this.drawtimeline(this.nom_cal1, this._hitoService, this.idcalbuscador);
}

result: any[] = [];
drawtimeline(nom_cal, _hitoService, idcalbuscador) {

var container = document.getElementById('timeLine');
//alert("id cal sele es :" + idcalbuscador);

var k = 0;
var j = 0;

var master = new vis.DataSet();
var items = new vis.DataSet();

this.result.push({ "_id": this.idcalbuscador,
"title": nom_cal });


this.result.forEach(function (ev) {
master.add([{ id: ev._id, content: ev.title, cal_id: ev._id }]);
var g = ev._id;

for (var i= 0; i<this.result.length; i++){
console.log("hola");
console.log(this.result[i]._id);
this._hitoService.getHitos(this.result[i]._id)
.subscribe(hito2 => {
this.hito2 = hito2
var items: any;
items = hito2;

items.forEach(function (item) {
items.add([{ id: k, group: g, start: item.start_datetime, end: item.end_datetime, style: itemStyle(item.design), className: "pepe" }]);
k++;
});
j++;
});

}
});


I am trying to implement a timeline using the vis.js, I retrieve the name and id of the timeline want in this class component then in the ngOnChanges I call the function to draw the timeline passing to it the name of the timeline, it's id and the services in other to get the observables item of the this specific timeline. I have an array that will store the timelines (result) I want to view and then an observable I subscribed to, to add the items of the timelines. The first foreach() will remove the first element in the result array, get the observables of items for that result and the second foreach() will go through the observables items and print the items, then it start over and move to the next. But all I get in the browsers console is : TypeError: this is undefined. Probably not making use of the service in the forach()

Answer Source

Assign current this to another variable (Say, that) then, use that into your callback.

Note: Inside your callback function this is changed to the JavaScript context by which the function is called.

const that = this;        // save the current 'this' to 'that' variable

this.result.forEach(function (ev) {
      master.add([{ id: ev._id, content: ev.title, cal_id: ev._id }]);
      var g = ev._id;

      for (var i= 0; i< that.result.length; i++){
        console.log("hola");
        console.log(that.result[i]._id);
        that._hitoService.getHitos(that.result[i]._id)
              .subscribe(hito2 => {
                that.hito2 = hito2
                var items: any;
                items = hito2;

                ....
             ....
           ....  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download