Ajax can't find json with node.js

Question

so I've built a little game (with p5.js library) and wanted to implement a Leaderboard loaded from a JSON file, used as a kind of DB to store Username/score, all of this using a Node.js server, with express installed to make things easier. So here is the html (with ajax code) :

<html>
<head>
  <title>KassBric - Mouetto</title>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <script language="javascript" type="text/javascript" src="Paddle.js"></script>
  <script language="javascript" type="text/javascript" src="Ball.js"></script>
  <script language="javascript" type="text/javascript" src="Brick.js"></script>
  <script language="javascript" type="text/javascript" src="Grid.js"></script>
  <script language="javascript" type="text/javascript" src="Attractor.js"></script>
  <script language="javascript" type="text/javascript" src="methods.js"></script>
  <script language="javascript" type="text/javascript" src="Bonus.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript">
      $.ajax({
          url: '/scores.json',
          dataType: 'json',
          success: function(data) {
              var keys = Object.keys(data);
              for(var i = 0; i < keys.length; i++) {
                var username = keys[i];
                var score = data[username];
                  var row = $('<tr><td>' + username + '</td><td>' + score + '</td></tr>');
                  $('#Leaderboard').append(row);
              }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('Error: ' + textStatus + ' - ' + errorThrown);
          }
      });
      </script>
  </head>

  <body>
    <div>
      <p id="LeaderboardHolder" style = "background-color : rgb(51, 51, 51); color: rgb(150, 150, 150); padding: 15px;">
        <table id="Leaderboard">
          <tr>
            <th>Username</th>
            <th>Best Score</th>
          </tr>
        </table>
        </p>
    </div>
  </body>

</html>

this is my server.js :

console.log("server is starting");
var express = require('express');
var fs = require('fs');
var app = express();
var server = app.listen(3000, listen);
function listen() {
  console.log("Listening...");
};
app.use(express.static('public'));

var data = fs.readFileSync('scores.json');
var scores = JSON.parse(data);
console.log(scores);

app.get('/leaderboard', showLeaderboard);
function showLeaderboard(request, response){
  response.send(scores);
};

app.get('/leaderboard/add/:username/:score?', addPlayer);
function addPlayer(request, response){
  var data = request.params;
  var username = data.username;
  var score = Number(data.score);
  var type = typeof score;
  if(!score || type !== 'number'){
    var reply = "Score is required, and must be a number.";
  }else{
    scores[username] = score;
    var data = JSON.stringify(scores, null, 2);
    fs.writeFile('scores.json', data, finished);
    function finished(err){
      console.log("Updated the database.");
      var reply = {
        request: "Submitted",
        username: username,
        score: score
      };
    };
  };
  response.send(reply);
};

app.get('/leaderboard/:username', showPlayer);
function showPlayer(request, response){
  var word = request.params.username;
  if(scores[word]){
    var reply = {
      username: word,
      score: scores[word]
    };
  }else{
    var reply = {
      msg: "Username not found"
    };
  };
  response.send(reply);
};

and my directory looks like :

-Project:
     -node_modules
     -public:
            -index.html (code above)
            -all my game files & folders
     -packages.json
     -scores.json
     -server.js

and so, with this running with Node/Express, I get an error:

"GET http://localhost:3000/scores.json 404 (Not Found)"

and by doing more tests, I tried to run a "basic" python SimpleHTTPServer in my project directory (in the public folder) and I get no errors, ajax gets the data and parses it into the html table. I can't find why this does work with python's server and not my node one ...

Answer 1

Your Ajax url /scores.json but you don't have the route to /scores.json in server.js

In this case my solution is:

$.ajax({
          url: '/handler',
          dataType: 'json',
          success: function(data) {
              var keys = Object.keys(data);
              for(var i = 0; i < keys.length; i++) {
                var username = keys[i];
                var score = data[username];
                  var row = $('<tr><td>' + username + '</td><td>' + score + '</td></tr>');
                  $('#Leaderboard').append(row);
              }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('Error: ' + textStatus + ' - ' + errorThrown);
          }
      });

and in server.js:

app.get('/handler', function(req, res) {

    var filePath = path.join(__dirname, '/scores.json');

    var file = fs.readFileSync(filePath, 'utf8');

    var result = JSON.parse(file);

    res.send(result);

}

Sorry for my English.

Ajax can't find json with node.js

Question

1 answers

solution1
0 ACCPTED 2017-07-16 16:19:50

Ajax can't find json with node.js

Question

1 answers

solution1 0 ACCPTED 2017-07-16 16:19:50

solution1
0 ACCPTED 2017-07-16 16:19:50