Performing an API GET request in a header.ejs file using Node.js

Question

Performing an API GET request in a header.ejs file using Node.js

Looking to fetch data from an endpoint for a header.ejs file that will be displayed on all routed files ("/", "/news" "/dogs").

Below is my app.js code:

// GET API REQUEST
var url = 'https://url.tld/api/';
request(url, function (error, response, body) {
    if(!error && response.statusCode == 200) {
        var parsedData = JSON.parse(body);
        return parsedData;
    }
});

app.get("/", function(req, res) {
    res.render("index.ejs", {parsedData: parsedData});   
    });

Code snippet from header.ejs:

<li>Active players: <span><%= parsedData["players"] %></span></li>

Encountering a "parsedData is undefined" error and unsure how to resolve. The goal is to display active players and server status in the navbar. Any suggestions on common practices to achieve this?

Thank you in advance!

javascript node.js express header ejs

Answer 1

Answer №1

If you're facing a challenge, consider using middleware as a solution.

According to the express documentation:

Middleware functions have access to the request object (req), response object (res), and the next middleware function in the application's request-response cycle.

Tasks that middleware functions can perform include:

Executing code.

Making changes to request and response objects.

Ending the request-response cycle.

Calling the next middleware function in the stack.

In middleware, always remember to include the request, response, and the function next. After performing necessary actions, call next to proceed with the following task.

For instance, if you wish to create middleware that logs the time for each incoming request, you could write something like this:

app.use(function(req, res, next) {
  console.log(Date.now())
  next()
})

In your specific case, it might look like this:

app.use(function(req, res, next) {
  // do something
  request(url, function(err, response, body) {
    // handle data
    res.locals.parsedData = parsedData
  })
})

To display the parsed data in your res.render, use:

res.render('index.ejs', {parsedData: res.locals.parsedData})

Referencing the express documentation once more:

[res.locals is] An object containing response local variables limited to the current request cycle, available only to rendered views during that cycle.

If you know the data is required only once, store it in app.locals instead. Within the middleware, check if app.locals.parsedData exists before making the request.

I hope this explanation is beneficial!

Answer 2

If you're facing a challenge, consider using middleware as a solution.

According to the express documentation:

Middleware functions have access to the request object (req), response object (res), and the next middleware function in the application's request-response cycle.

Tasks that middleware functions can perform include:

Executing code.

Making changes to request and response objects.

Ending the request-response cycle.

Calling the next middleware function in the stack.

In middleware, always remember to include the request, response, and the function next. After performing necessary actions, call next to proceed with the following task.

For instance, if you wish to create middleware that logs the time for each incoming request, you could write something like this:

app.use(function(req, res, next) {
  console.log(Date.now())
  next()
})

In your specific case, it might look like this:

app.use(function(req, res, next) {
  // do something
  request(url, function(err, response, body) {
    // handle data
    res.locals.parsedData = parsedData
  })
})

To display the parsed data in your res.render, use:

res.render('index.ejs', {parsedData: res.locals.parsedData})

Referencing the express documentation once more:

[res.locals is] An object containing response local variables limited to the current request cycle, available only to rendered views during that cycle.

If you know the data is required only once, store it in app.locals instead. Within the middleware, check if app.locals.parsedData exists before making the request.

I hope this explanation is beneficial!

Performing an API GET request in a header.ejs file using Node.js

Answer №1

Similar questions

The driver instance that has forked will never cease

Refreshing the Mocha Server

Find and return a specific record from MongoDB if it matches the exact value

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

What is the best way to link docker containers together for optimal performance?

Guide on utilizing exported API endpoint in Node and Express

The loop is being controlled but the data is not being added and shown in the HTML div

Check out this Angular demonstration page!

"Is there a way to retrieve "Lorem ipsum" information from a web service in JSON format

JavaScript - Modify input character prior to appending it to the text area

What's the best way to correctly update the selection of chokidar files without the need to create a

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

Building a React Redux project template using Visual Studio 2019 and tackling some JavaScript challenges

Implementing a watcher property in JavaScript to dynamically add a class to an element

Issues with jQuery slide operation

How to locate the index.js file within my application using Node.js?

What are the steps to implement the jQuery slide menu effect on a website?

I am struggling to apply custom CSS styles to the scrollbar within a Card component using MUI react

Refresh two angular-datatables

Obtain a collection of strings from an array of objects based on specified criteria