1

I get this error: TypeError: undefined is not an object (evaluating 'table[0][3]') every time and none of my JQuery works. If I run my server as localhost there is not problem, but it occurs when it's on the real server. Error message

Here is my code snippet and the row I get the error on:

$(document).ready(function() {

    $('#number-of-ratings1').text(table[0][3]);

}

I really don't understand why this error occurs. Any help will be appreciated. Thank you very much in advance!

EDIT: my app.js file:

var fs = require('fs');
const log=require('simple-node-logger').createSimpleLogger();
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
var port = process.env.PORT || 8081;

app.use(express.static(__dirname + '/server'));
app.use(express.static(__dirname + '/public'));

app.use('/images', express.static(__dirname +'/images'));

app.get('/', function(req, res){
    res.sendFile('main.html');
});

app.listen(port, function(){
    console.log('Server is running on port:' + port);
});

app.post('/submit', function(req, res){
 console.log(req.body.rank);
 return res.sendFile('success.html');
});

My JQuery:

var table = [];
var row = [];

$.get('data.txt', function(data) {

   var bigarray = data.split('-');
   bigarray.forEach(function(currRow){
     currentRow = currRow.split(';');
     table.push(currentRow);
   });
}, 'text');


$(document).ready(function() {
   $('#number-of-ratings1').text(table[0][3]);
}
  • Either `table` is undefined, or it's not a two-dimensional array. You don't show how you're populating `table`, but given that it works on one server but not on another I'm going to guess it's an async code problem and you're trying to use the variable before it's set. – Daniel Beck Mar 29 '18 at 13:30
  • Could you provide your JS code? Would be helpful and faster – Alex Mar 29 '18 at 15:06
  • I edited my post. Thanks! @Alex – Gabriela Boyadjiyska Mar 29 '18 at 15:14
  • 1
    Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Jared Smith Mar 29 '18 at 15:16
  • There's nothing in the table when you try to access it, the `get` hasn't happened yet. Which is why it works on localhost but not the server: on localhost the `get` is finished before the document is ready but on the server it takes too long. – Jared Smith Mar 29 '18 at 15:17
  • @JaredSmith Ok, what should I switch? – Gabriela Boyadjiyska Mar 29 '18 at 15:19
  • @GabrielaBoyadjiyska move the access into the callback to the `$.get`. Alternatively, since get returns a Promise: `var asyncResult = $.get('data.txt'); asyncResult.then(function(data) { table = data.split('-').map(function(row) { return row.split(';'); }); $('#number-of-ratings1').text(table[0][3]); });` – Jared Smith Mar 29 '18 at 15:31

1 Answers1

0

Put the code

$('#number-of-ratings1').text(table[0][3]);

after the bigarray.forEach has finished.

$.get('data.txt', function(data) {

   var bigarray = data.split('-');
   bigarray.forEach(function(currRow){
      currentRow = currRow.split(';');
      table.push(currentRow);
   });
   $('#number-of-ratings1').text(table[0][3]);
}, 'text');
Nard Dog
  • 906
  • 1
  • 18
  • 33
  • The only problem is that sometimes the number-of-ratings (basically the number) doesn't show up at all. Only sometimes when I refresh it. – Gabriela Boyadjiyska Mar 29 '18 at 15:28
  • You can always add a debugger and open the dev console to make sure the value is populated when it is attempted to be set every time. If it's not, you can see at that point why and what happened. – Nard Dog Mar 29 '18 at 15:33