How to send data from a Node.JS server to a page file?

I found myself a proxy server on Github, but it’s written in Node.JS.

I want to get the data that I got from an API to display from a HTML page, but I am stuck at this point.

This is my code:

function getUserInfo()
{
  axios(config)
  .then(function (response) {
    var loginData=response.data
    var userJSONData = JSON.parse(JSON.stringify(loginData))
    var firstName=userJSONData["data"].firstName
    var lastName=userJSONData["data"].lastName

      console.log(firstName+' '+lastName)
      console.log(gender)
  })
  .catch(function (error) {
    console.log(error);
  });
}

How can I achieve this?

Is there any reason you need a proxy server?

Can you not just make a fetch request to the API from the web page, then parse the response and insert it into the page?

Because of CORS errors. I did just that for Vue.JS, and I kept getting these errors.

Got it.

So from your web page, you make a request to your Node server. Then the Node server grabs the data from the API and returns it to the web page to display.

Did I get that right? (and if so, which part are you having trouble with?)

That’s right. I’m having trouble getting it to display on the HTML page.

What is the Ajax request to the Node proxy returning? (you can look in the network tab of your dev tools, or try logging it to the console).

In the code you posted above, I can only see you logging the result, not returning it to the calling script. I presume this is happening elsewhere?

Here is the code that’s supposed to display the data.

    app.get('/', (req, res)=>{
      res.render('home', {loginData:loginData});
      });

The EJS file, the part where it would have displayed the name:

<body>
    <p>Data of <%=loginData.firstName%>:<br/></p>
</body>

Sorry man, I’m having a hard time piecing together what is happening where in your app.

I can’t see anything explicitly wrong with the code you posted so far, but it sounds like something is undefined which shouldn’t be. This could be caused by you not returning the correct value or by a timing issue.

If you could make a small demo demonstrating the problem (that I can run on my PC), I’ll be happy to take a look. You can hardcode the API response if this is being returned correctly.

Looks like you’ve messed up reading the response. There is no need to convert response.data (which is already a javascript object if your server returns JSON) to JSON string and then back to object. Then you’re trying to access data property again, it seems weird.Try this:

function getUserInfo() {
  axios(config)
  .then(response => {
    let firstName = response.data.firstName
    let lastName = response.data.lastName
    console.log(firstName+' '+lastName)
  })
  .catch(function (error) {
    console.log(error);
  });
}

To say more I have to see what’s in your response.data

Also, make use of “Network” tab in your browser. Press F12 to open dev tools and select “Network” tab. Set filter tab to “XHR” to see AJAX-requests only. Now each made request will be displayed in a list and you can click it to see it’s response. It’s very helpful to post sample response when you’re creating topics like this. The more information you’ll give, the more quality help you receive.

Click here to see screenshot

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.