Cannot read property 'push' of undefined Typescript / Angular 6

Question

I'm Implementing small chat application using socket.io gladly it's working fine. But my concern is when I got a new chat I need to assign it to string array to display in listview.

I have simply define array as "messages: string[] = [];" and pushed sample string on page load and it's working fine.But when I got new message from a socket this.socket.on('newmessage', function (data) method will fire and can read new message.those all things working correctly.

But When I push new string into my "messages: string[] = [];" array. I'm getting 'Cannot read property 'push' of undefined' error.

import { Component, OnInit} from '@angular/core';
import * as io from 'socket.io-client';

@Component({
  selector: 'app-chatbox',
  templateUrl: './chatbox.component.html',
  styleUrls: ['./chatbox.component.css'],

})

export class ChatboxComponent implements OnInit {
  socket;
  messages: string[] = [];
  
  constructor() { this.socket = io.connect('http://localhost:8000'); }

  ngOnInit() {
    this.initializeChatServer();
  }

  initializeChatServer() {
  
    this.messages.push( 'test 55');//This line works

    this.socket.on('newmessage', function (data) {
      console.log('message -> ' + data.nick + '>' + data.msg);     
      this.messages.push(data.msg); //Cannot read property 'push' of undefined
    }); 
    
  }

}

Possible duplicate of How to access the correct `this` inside a callback? — JB Nizet
– JB Nizet, Commented Aug 28, 2018 at 6:31
Here we go again. Use an arrow function, not an anonymous function: this.socket.on('newmessage', data => { ... }) — JB Nizet
– JB Nizet, Commented Aug 28, 2018 at 6:32

Isanka Thalagala · Accepted Answer · 2018-08-29 04:17:36Z

1

I think it's because of synchronize call.I think it's not the standard way but it worked after I change like this..

 initializeChatServer() {

    this.messages.push( 'test 55');
    var self = this;//assgin this to var variable
    this.socket.on('newmessage', data => {
      console.log('message -> ' + data.nick + '>' + data.msg);     
      self.messages.push(data.msg); 
    });

  }

answered Aug 29, 2018 at 4:17

Isanka Thalagala

1,7513 gold badges20 silver badges44 bronze badges

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

Comments

basarat · Accepted Answer · 2018-08-28 06:45:00Z

0

this.messages.push(data.msg); //Cannot read property 'push' of undefined

Because you have the wrong this. Arrow functions will fix that e.g. Change this.socket.on('newmessage', function (data) { to this.socket.on('newmessage', (data) => {

answered Aug 28, 2018 at 6:45

basarat

278k60 gold badges475 silver badges528 bronze badges

Comments

Charly · Accepted Answer · 2018-08-28 06:49:11Z

import { Component, OnInit} from '@angular/core';
import * as io from 'socket.io-client';

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

export class ChatboxComponent implements OnInit {
  socket;
  messages: string[] = [];

  constructor() { this.socket = io.connect('http://localhost:8000'); }

  ngOnInit() {
    this.initializeChatServer();
  }

  initializeChatServer() {

    this.messages.push( 'test 55');//This line works

    this.socket.on('newmessage', data => {
      console.log('message -> ' + data.nick + '>' + data.msg);     
      this.messages.push(data.msg); //Cannot read property 'push' of undefined
    });

  }

}

Collectives™ on Stack Overflow

Cannot read property 'push' of undefined Typescript / Angular 6

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related