Socket.io TypeError: Cannot read property 'hteam' of undefined

Question

I am new to Socket and I am using it to get live Australian football scores from this API and displaying them with Express/Pug.

I can get them to display in the browser fine but in the console I am getting the following error:

Uncaught TypeError: Cannot read property 'hteam' of undefined
    at r.<anonymous> (round2:8)
    at r.emit (index.js:83)
    at r.onevent (index.js:83)
    at r.onpacket (index.js:83)
    at r.<anonymous> (index.js:83)
    at r.emit (index.js:83)
    at r.ondecoded (index.js:83)
    at a.<anonymous> (index.js:83)
    at a.r.emit (index.js:83)
    at a.add (index.js:83)

I have tried the solutions mentioned here and here but none of them work.

My index.js file is:

var app = require('express')();
var http = require('http').createServer(app);
exports.io = require('socket.io')(http);
const path = require('path');
const routes = require('./routes/routes');
var port = process.env.PORT || 3000;

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use('/', routes);

http.listen(port, function(){
    console.log('listening on *:' + port);
  });

My routes.js file is:

onst express = require('express');

const router = express.Router();
const controllers = require('../controllers/controllers');

router.get('/round1', controllers.getRound1);
router.get('/round2', controllers.getRound2);
router.get('/round3', controllers.getRound3);

module.exports = router;

My controller.js file is:

var http = require('http').createServer(require('express')());
var io = require('socket.io')(http);
const got = require('got');
var { io } = require('../index');
let interval;

const getApiAndEmit = async (socket, round) => {
    try {
      const response = await got('https://api.squiggle.com.au/?q=games');
      const parsed = JSON.parse(response.body);
      gamesArray = parsed.games;
      const roundArray = [];
      gamesArray.forEach(element => {
          if (element.round === round && element.year === 2020) {
              roundArray.push(element); 
          }
      });
      socket.emit('FromAPI', roundArray);
    } catch (error) {
      console.error(`Error: ${error.code}`);
    }
};

let getGame = function (round) {
    io.on('connect', socket => {
        if (interval) {
          clearInterval(interval);
        }
        interval = setInterval(() => getApiAndEmit(socket, round), 3000);
    }); 
}



exports.getRound1 = function (req, res) {
    getGame(1);
    res.render('game', {title: 1});
    res.sendFile(__dirname + '/index.html');
};

exports.getRound2 = function (req, res) {
    getGame(2);
    res.render('game', {title: 2});
};

exports.getRound3 = function (req, res) {
    getGame(3);
    res.render('game', {title: 3});
};

My Pug view is:

block layout-content
    h1 Round #{title}
    p(id='score')
        p(class='game')
        p(class='game')
        p(class='game')
        p(class='game')
        p(class='game')
        p(class='game')
        p(class='game')
        p(class='game')
        p(class='game')

    script(src="/socket.io/socket.io.js")
    script.
        const scores = document.getElementById('scores');
        const games = document.getElementsByClassName('game');
        const socket = io();

        socket.on('FromAPI', roundArray => {

            for (let i = 0; i < games.length; i++) {
                games[i].innerHTML= ` ${roundArray[i].hteam} ${roundArray[i].hgoals}.${roundArray[i].hbehinds} ${roundArray[i].hscore} v ${roundArray[i].ateam} ${roundArray[i].ascore}`
            }
        });

My package.json is:

{
    "name": "socket afl scores",
    "version": "0.0.1",
    "description": "my first socket.io app",
    "dependencies": {
        "express": "^4.17.1",
        "got": "^11.3.0",
        "pug": "^3.0.0",
        "socket.io": "^2.3.0"
    }
}

Thank you

Answer 1

The cause of the error was on the client side in view .

The conditional statement of the for loop should have been

(let i = 0; i < roundArray.length; i++)