Getting Data from Node.js file and displaying it in HTML/JS page

Question

I am new to Node.js and this is my first project with it. I have made a node.js file named test.js. It has an array say a.

Now I want to make a HTML file that calls this test.js on button click event. Then get the data from that file and publish it on a table in the HTML file.

I have already written the node.js file and I can see the results on console.log(a). But I cant understand how to send this array to HTML when it will ask for it.

Meanwhile, I googled and made up some code. The request reaches the server but I always get error response from server. Why so?

Client Side -

function fetch() {
    $.ajax({
    type: 'POST',
    url: "http://127.0.0.1:8888",
    data: 'China',
    datatype: 'json',
    success: function (data) {
        alert("hi");
        var ret = jQuery.parseJSON(data);
        $('#q').html(ret.msg);
    },
    error: function (xhr, status, error) {
        alert("hii");
    }
});

Server side :

http.createServer(function(request, response) {  
    console.log("Request received");
    response.writeHeader(200, {"Content-Type": "application/json"}); 
    request.on('data', function (chunk) {
        console.log(chunk.toString('utf8'));
                    consol.log(result);
        response.write(JSON.stringify({data : result}));
    });     
    response.end();  
}).listen(8888);

I can see China on the console.But I dont get back the result array back to the client. Here result is an array and I get its value on the console. Just that I dont get it back to the client. Any help ?

You need to run nodeJS as an http server and have it serve the data on request. Then you need to update your HTML file so that it makes an AJAX call to your nodejs server on button click. — JohnP
– JohnP, Commented Aug 4, 2013 at 11:00
@JohnP: Thanks for commenting. Could you write it as an answer in details. I am very new to node.js — Wayne Rooney
– Wayne Rooney, Commented Aug 4, 2013 at 11:03

PhD · Accepted Answer · 2021-08-10 21:20:51Z

21

You should start by setting up a server to serve requests. I use expressjs for this - http://expressjs.com/

This will allow you to run nodejs as a web application.

Setup a route in express JS to serve your data - http://expressjs.com/api.html#express

var express = require('express');
var app = express();

app.get('/data', function(req, res){
  res.send('hello world'); //replace with your data here
});

app.listen(3000);

Open up a browser, and type in http://MY_SERVER_ADDR:3000/data and you should see your output there.

Next, you'll need to attach an event handler to your HTML file that will trigger a $.get() request when it is triggered. Add the previous url to your data in your $.get call and do something with it.

$('.my_selector').click(function(){
   $.get('http://MY_SERVER_ADDR:3000/data', {}, function(data){
        console.log(data)
   });
});

That should get you going.

edited Aug 10, 2021 at 21:20

PhD

11.4k15 gold badges70 silver badges119 bronze badges

answered Aug 4, 2013 at 13:33

JohnP

50k13 gold badges112 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wayne Rooney Over a year ago

Thank You. I am trying with the edited code now. If I dont get any help, then I will try using express

Swapnil Over a year ago

how to get data in html page when render html page in responce and pass data in other parameter. like this res.render('page.html', { list });

JohnP Over a year ago

@SPnL The data would have to be sent as part of the page I think. You'd have to encode that data as JSON inside page.html and read it using client side JS

Marc de Ruyter · Accepted Answer · 2018-02-12 08:08:17Z

0

After wrestling with the same question, i found that this is exactly where a template engine comes into the node-picture. EJS solved it for me, but there are many more available. This article compares 10 template engines.

answered Feb 12, 2018 at 8:08

Marc de Ruyter

195 bronze badges

Collectives™ on Stack Overflow

Getting Data from Node.js file and displaying it in HTML/JS page

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related