Serve node api data to client side js

Question

I'm using request to make a api call, and return some data to my app. I'm able to receive the data in the body response of my code

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

app.get('/', function(req, res){
    res.sendFile(__dirname + "/index.html");
    request('https://api.darksky.net/forecast/apikey/37.8267,-122.4233', function (error, response, body) {
      console.log('error:', error); 
      console.log('statusCode:', response && response.statusCode); 
      console.log('body:', body); 
    });
}).listen(3000);

console.log('Server is up and running');

The api call is made then i hit my index file at / - so far, so good

However i want to send the body response, with my data, to a react js file, so i can use the data to serve to the client. I can't seem to find any help on how to serve data to another javascript file.

Can you post the code to show how you are making the GET request in your react js file? — Pat Needham
– Pat Needham, Commented Mar 2, 2017 at 19:19
The problem is that i don't know how i should do it, but i guess i would use axios, or jQuery to make a call. But should i just make a request to the file above? — frisk0
– frisk0, Commented Mar 2, 2017 at 19:25
I would make a new app.get route specifically for returning the data you receive from the api.darksky.net request, to separate it from your homepage route returning index.html. In that, you can return res.json(body) — Pat Needham
– Pat Needham, Commented Mar 2, 2017 at 19:32

gtrenco · Accepted Answer · 2017-03-03 07:13:15Z

1

I think you should serve your index in one path, and the darksky request in another one.

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

app.get('/', function(req, res){
    res.sendFile(__dirname + "/index.html");
});

app.get('/api/forecast, function(req, res) {
    request('https://api.darksky.net/forecast/apikey/37.8267,-122.4233', function (error, response, body) {
        console.log('error:', error); 
        console.log('statusCode:', response && response.statusCode); 
        console.log('body:', body);
        res.json(body);
    });
});

app.listen(3000);
console.log('Server is up and running');

and on the client side use an ajax request to your server in order to get the body, something like this:

return $.getJSON('http://localhost:3000/api/forecast')
      .then(function(data) {
        this.setState({ forecast: data.results });
      });

Hope it helps!

edited Mar 3, 2017 at 7:13

answered Mar 2, 2017 at 19:55

gtrenco

3753 silver badges8 bronze badges

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

7 Comments

frisk0 Over a year ago

This seems like something i'm looking for. I'll try it out :) Thanks!

frisk0 Over a year ago

jQuery doesn't seem to be happy though: GET localhost:3000/api/forecast net::ERR_CONNECTION_REFUSED jquery.min.js:4

Kunok Over a year ago

@c-poulsen hey would you like to try Axios library? It supports promises and you can use it on both client and server side. I replaced all my request library methods with Axios npmjs.com/package/axios

frisk0 Over a year ago

The error is on the client side. The API call from the server returns data, but when i call my own server i get the error above. I can try axios on the client side though

frisk0 Over a year ago

Or i could also just try to call the server using the proper port :D

|

Collectives™ on Stack Overflow

Serve node api data to client side js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related