Send a res.json response and retrieve it using res.render in a different router

Trying to retrieve a JSON from the route "/api/product" and display it using hbs on the "/product" route. The code seems to be working, but is it done correctly?

The router in this case is: '/api/product'

router.get('/', this.controller.renderProducts);

renderProducts = async (req, res) => {
    try {
      const docs = await this.ProductsDAO.getAll();

      const products = docs.map((p) => {
        return new ProductDTO(
          p.id,
          p.price,
          p.stock
        );
      });

      res.status(200).json({ product:products });
    } catch (error) {
      logger.error('Error rendering products', error);
      res.status(400).send('Failed to render products');
    }
  };

Should I add this code to server.js for it to work properly?

app.get('/product', new RequestViews().getAllProducts)

class RequestViews {
  constructor() {
    this.url = 'http://localhost:8080/api/product';
  }

 getAllProducts = (req, res, next) => {
    request.get(this.url, (err, response, body) => {
      if (err) {
        return next(err);
      }
      res.render('products', JSON.parse(body));
    });
  }

Thank you!

Answer №1

Minimize internal HTTP requests in your Express app by consolidating logic into reusable functions.

One approach is to encapsulate mostrarTodos() and .map() within a function...

const retrieveProducts = async () => {
  const data = await ProductsDAO.mostrarTodos();

  const products = data.map((p) => new ProductDTO(p.id, p.price, p.stock));
};

and utilize this function across route handlers

displayProducts = async (req, res) => {
  try {
    res.status(200).json({ products: await retrieveProducts() });
  } catch (error) {
    logger.error("Error rendering products", error);
    res.status(400).send("Failed to render products");
  }
};
class RequestViews {
  showAllProducts = (req, res, next) => {
    retrieveProducts()
      .then((products) => {
        res.render("products", { products });
      })
      .catch(next);
  };
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate auto refresh in a client-side application using vue.js?

Disclaimer: I have separated my client application (Vue.js) from the server side (DjangoRest). I am utilizing JWT for validating each request sent from the client to the server. Here is how it works - The client forwards user credentials to the server, an ...

Setting the content-type for static assets in NuxtJS

I'm trying to use the Nuxt built-in server to serve the static file /.well-known/apple-app-site-association with a content-type of application/json. Unfortunately, because the file does not have a .json extension, it is returning as application/octet- ...

The use of $scope.$destroy may resolve memory leak issues, but it can also cause

In my TypeScript AngularJS application, I have a child directive that is dynamically generated. The template and controller are assigned at runtime based on the requirements of the situation, with multiple directives within the template. To display multipl ...

Confirm that the Time sequence is accurate using JavaScript Selenium

I am working with a list of time intervals that includes 'a day ago, 10 days ago, 3 months ago, and 6 months ago.' How can I verify that these dates are in ascending order using JavaScript and Selenium? I am unsure of how to approach this proble ...

Trouble getting Fontawesome icons to accept color props when using react functional components with tailwindcss

Issue I'm Facing I'm currently working on a project that involves using icons extensively. Instead of manually adding a Fontawesome icon in every script, I have created a functional component that handles the rendering of icons based on given pr ...

Creating an external link in Angular with query parameters

I have created an app where users have their addresses listed, and I want to implement a feature that allows me to open Google Maps when clicking on the address. However, I am currently facing an issue where instead of getting the actual value of {{ this. ...

What is the best way to adjust the decimal values in my API calls?

Is there a way to adjust the numerical data returned by the API to display only two decimal places instead of three? For example, if the number is 140.444, I want it to show as 140.44 What changes do I need to make? function fetchData() { fetch(" ...

Implementing ESM in your next.config.js file is critical for optimizing

Currently, I am in the process of optimizing a Next.js project and came across the requirement to include type: 'module' in thepackage.json file. However, this led to an error being thrown: Error [ERR_REQUIRE_ESM]: Must use import to load ES Mo ...

Deciphering Files with NodeJs AES Encryption and Redirecting to a Stream

I am currently working on encrypting a file in C# and decrypting it in Node.js using AES encryption. The code snippet below demonstrates the successful decryption process, however, it writes the decrypted content to an output file named `output_dec.xml&apo ...

The jQuery autocomplete feature with typeahead suggestions fails to appear following a successful AJAX request

I am currently using typeahead.js to incorporate tags into my multiple input setup. The tagging function works as expected, however, I am facing an issue where the autocomplete suggestions are not appearing. Is there a solution to fix this problem? Despit ...

How can you use JavaScript to create a JSON object using values from an HTML form textarea and then send

I need to create an HTML form that will send specific information in the Http-request body. { “info” : { “id” : “123” “text1” : <data from html text-box> } Therefore, my goal is to convert the provided data into a JavaScri ...

Tips for attaching a "progress" and refresh event to an ajax call while sending a file

I am currently using the FormData API and AJAX to upload files to a server in PHP-CodeIgniter. The file upload works perfectly when triggered by the file select event. However, I would like to display a progress bar next to each file being uploaded with th ...

My attempts to utilize the local storage key have been unsuccessful in storing my todo list. I am uncertain where the issue lies within my code

I've been working on a Todo List with local storage in React, but I'm running into an issue. It seems that my todos aren't getting stored properly and are disappearing every time the page refreshes. I need to figure out what's causing t ...

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1, minWidth: 150 }} size="sm ...

Load image asynchronously using a mirror server in React/Next.js with a set timeout time

For my website, I have decided to store all of my images on IPFS, which are pinned successfully. This has helped reduce traffic and keep costs within the free tier offered by my hosting provider. However, at times the IPFS url may not load fast enough dep ...

Elegant bespoke input box

I am looking to create a customized input text feature similar to StackOverflow's tag editor, but with some minor differences. The goal is for the input field to function like a regular text input until a word is enclosed in curly brackets. Once enclo ...

I'm having trouble displaying the result of my calculation in the code. Could it be because I forgot to include an output tag?

I am attempting to develop a Miles Per Gallon (MPG) calculator using Javascript. However, I'm encountering difficulties with displaying the results once the "Calculate" button is pressed. <html> <head> <title> MPG Calculator </ti ...

Is it possible to change the name of a PHP file using the value entered in an input

I am currently in the process of trying to change the name of a file while uploading it using the JQuery uploader. I have made some progress, and here is the crucial part of my UploadHandler.php: protected function handle_file_upload($uploaded_file, $name ...

What is the best way to add a radial pattern to a ring using three.js r67?

I am facing a challenge in applying a texture to a ringGeometry using three.js r67. The issue lies in orienting the texture correctly. My goal is to apply a specific texture to a ringGeometry mesh in a radial manner, where the blue end of the texture align ...

Setting up Quill in a Nuxt project (a VUE component)

I'm struggling to remove the toolbar in Quill despite my efforts. This is the HTML snippet I am working with: <template> <quill v-model="content" :config="config"></quill> </template Here's what I have inside the scri ...