3

Let me preface by saying that I have spent a considerable amount of time trying to figure out the solution to this problem but I have not discovered something that works. I am using node and want to share a variable between my app.js server file and a client side javascript file (demo.js).

I run node app.js to launch the server and demo.js runs in the client. I have tried using module.exports and export but when I try importing in the demo.js file or referring to the module.exports var I get errors. Maybe I'm approaching this is in the wrong way.

For example, I am trying to use the node wikipedia package to scrape data. I have the following in my app.js file:

var wikipedia = require('node-wikipedia');

wikipedia.page.data('Clifford_Brown', { content: true }, function(response) {
    console.log(response);
    export const response = response;
    module.exports.data = response
});

In my demo.js file I have tried importing this response var and using the module.exports var but I have been unsuccessful.

Anyone have any solutions to this issue or different approaches I should take?

Ties
  • 806
  • 7
  • 13
chackerian
  • 1,301
  • 2
  • 15
  • 29
  • I don't know a thing about current state of node.js tech, but I think it's unreasonable to expect this magical sharing of data between client and server. What I expect to be the solution here is explicitly sending data over the wire. Using the good old request-response (client asks for data with ajax request and gets data in the response) or server pushes data into a websocket or something. – Sergio Tulentsev Jul 23 '16 at 20:16

3 Answers3

4

Browser javascript files run in the browser. node.js javascript files run on the server. You cannot directly export things from one to the other. They are on completely different computers in different locations.

It is very important for developers to understand the notion that server-side code runs on the server and client-side code runs on the browser. The two cannot directly call each other or reach the other's variables. Imagine your server is in a data center in Seattle and the browser is running on a computer in Venice.

See How to access session variables in the browser for your various choices described for a previous answer.

In a nutshell, you can have the server insert a javascript variable into the generated web page so that when the javascript runs in the web page on the browser, it can then access that variable in its own page. Or, you can create an Ajax call so the client can request data directly from the server. Or you can have the server put some data in a cookie which the Javascript in the browser can then access.

If the data is easily known by the server at the time the page is generated and you are using some sort of page template system, then it is very easy to just add a <script> tag to the generated page that defines one or more Javascript variables that contain the desired information. Then, the client-side Javascript can just refer to those variables to have access to the data.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Are you suggesting I move the app.js code I included to run within a script tag instead? When I do that it tells me required is undefined – chackerian Jul 23 '16 at 20:55
  • @chackerian - No. I'm suggesting that when you generate the web page for the browser request, you embed in that web page some ` – jfriend00 Jul 23 '16 at 21:06
  • @chackerian - If you want further help, then you need to show a much larger context for what you're trying to do. Show more code and describe in more words what you are trying to accomplish. You also can't `export` data from an async callback like you are trying to do in the little bit of code you do show. We can only help further if you show and describe for us a lot more of what you're really trying to do (real code, not abstract questions). – jfriend00 Jul 23 '16 at 21:08
  • Thanks for sticking with this problem I'm facing. I included all relevant code I believe. On the server I'm getting data from wikipedia. I want to use this data in my client javascript. For example, I would want to console.log the wikipedia data received from the server in the browser. This would involve getting the data into demo.js. – chackerian Jul 23 '16 at 21:44
  • @chackerian - What you aren't showing us is how this happens on the server. Are you getting this wikipedia data upon server startup? Or are you getting it in response to some specific page request? – jfriend00 Jul 23 '16 at 21:52
  • On startup I believe. I just placed it in my app.js file. It isn't within any routing function or anything. – chackerian Jul 23 '16 at 22:01
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118111/discussion-between-chackerian-and-jfriend00). – chackerian Jul 23 '16 at 23:11
1

To pass data in http there is a request message and response message and the data needs to be inside that message.

In the request you can either pass variables in the request URL

http://host_name/path?key=value

Or inside the request body or headers.

In the response you pass back variables in the response header or response body

First Example:

One way of processing a URL request from the browser explicitly while passing variables is to set up your server to render a html page with those variables embedded.

If you use a templating engine like jade, you can consume the sent variables directly into the template using res.render({ key: 'value' }) rather than using a promise based api call which would run when the user performs some action on the client.

For instance.

// SERVER setup rendering engine
app.get('/', function(req, res) {
    res.render( 'index', { key: 'value' })
}

Which will render index.html to the client with the key-value pair passed to the template file used to serve up the index.html (for example jade or ejs).

Second Example:

Using axios you can set up an action to call a server api (you can also pass variables in the URL, headers or body). Using the promise pattern you can then use these variables after the server api has responded.

// CLIENT setup axios
axios.get(URL + '/getkeyvalue')
    .then(function(response) {
        const value = response.data.key
    })

On you server using express you (this is where you would get the optional request variables mentioned above) send back response variables in the body like this.

// SERVER setup express
app.get('/getkeyvalue', function(req, res) {
    res.send({ key: 'value' })
}

Note that these are simple examples.

alex
  • 5,467
  • 4
  • 33
  • 43
0

They are too completely different systems. The best way to accomplish what you're trying to do is the create a variable in your html on the server side by stringifying your data

<script> var my_data = <%= JSON.stringify(data) %> </script>

Thats an example using ejs, a common templating language in expressjs

Rob Wilkinson
  • 296
  • 1
  • 7