Socket.io TypeError：無法讀取未定義的屬性“hteam”

Question

我是 Socket 的新手，我正在使用它從這個 API獲取實時澳大利亞足球比分，並使用 Express/Pug 顯示它們。

我可以讓它們在瀏覽器中正常顯示，但在控制台中我收到以下錯誤：

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)

我已經嘗試過這里和這里提到的解決方案，但它們都不起作用。

我的index.js文件是：

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);
  });

我的routes.js文件是：

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;

我的controller.js文件是：

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});
};

我的帕格觀點是：

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}`
            }
        });

我的package.json是：

{
    "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"
    }
}

謝謝

Answer 1

錯誤的原因在客戶端視圖中。

for 循環的條件語句應該是

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