0

Got a weird issue. I made simple web-server on nodeJS that serves 3 files (HTML, JS script file and JSON). First 2 files can be found here: https://jsfiddle.net/xyaxn9Lp/ .

JSON contains two properties:

{
  "organization" : "ORG1",
  "address" : "ORG1 Address"
}

Server code:

const http = require('http');
const fs = require('fs');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer(function (req, resp) {
    if (req.url === "/") {
        fs.readFile("index.html", function (error, pgResp) {
            if (error) {
                resp.writeHead(404);
                resp.write('Contents you are looking are Not Found');
            } else {
                resp.writeHead(200, { 'Content-Type': 'text/html' });
                resp.write(pgResp);
            }
            resp.end();
        });
    }
    else if (req.url === "/main.js") {
        fs.readFile("main.js", function (error, pgResp) {
            if (error) {
                resp.writeHead(404);
                resp.write('Contents you are looking are Not Found');
            } else {
                resp.writeHead(200, { 'Content-Type': 'application/javascript' });
                resp.write(pgResp);
            }
            resp.end();
        });
    }
    else if (req.url === "/organizations.json") {
        fs.readFile("organizations.json", function (error, pgResp) {
            if (error) {
                resp.writeHead(404);
                resp.write('Contents you are looking are Not Found');
            } else {
                resp.writeHead(200, { 'Content-Type': 'application/json' });
                resp.write(pgResp);
            }
            resp.end();
        });
    }
    else {
        resp.writeHead(200, { 'Content-Type': 'text/html' });
        resp.write('<h1>Wrong URL!</h1>' + req.url);
        resp.end();
    }
});

server.listen(port, hostname);
console.log("Server running at http://" + hostname + ":" + port + "/"

The reason i'm doing this - i want two properties of JSON file to be inserted in <h1> and <p> tags on empty page. When index.html page is loaded it sends request to my web-server to get this JSON file, and with the usage of createElement and appendChild it should add ORG1 to <h1> and ORG1 Address to <p> tags.

But i can't get it working! For some reason response from server is empty and all i have is this error:

enter image description here

If i put console.log(organizations) inside onload function i clearly can see my JSON file is here!

enter image description here

QqQq
  • 85
  • 7
  • 1
    What makes you think that a report that `header` is `null` has anything to do with the response from the server? – Quentin Feb 07 '18 at 14:25
  • @Quentin i'm not entirely sure, if i understand your link correctly it happens because i run function before JSON file in loaded to browser and response i got is not fully loaded response? – QqQq Feb 07 '18 at 14:46
  • 1
    "before JSON file in loaded to browser" — Why do you expect `header = document.querySelector...` to care about the **JSON** file? – Quentin Feb 07 '18 at 14:48
  • @Quentin sorry i'm a bit confused, i dont expect that DOM selector is taking care of the json file or response from the server. Does this behaviour happens because initially my `header` element is empty? – QqQq Feb 07 '18 at 14:55
  • 1
    No. It is because initially *it does not exist* – Quentin Feb 07 '18 at 14:55
  • @Quentin OMG I finally understood. I put my script at the bottom of `` element and it worked! So the script run before `
    ` was even placed on a page because `` is higher? Is there any workaround if i want scripts as a separate files?
    – QqQq Feb 07 '18 at 15:02
  • @Quentin Sorry for the chain of comments, `defer` option did the job. I really appreciate your patience and help provided. How can i mark your answer and close a question? – QqQq Feb 07 '18 at 15:10
  • I haven't given an answer. The question is already closed. – Quentin Feb 07 '18 at 15:41

0 Answers0