Function anonymous when running backend server

I’m trying to create a routing function for some products. The home screen works fine (displaying all the products), but I’m trying to add functionality so that when a user clicks on the product it automatically redirects to a page which pulls information about that products.

When I run my back end server (npm start) I get this in my terminal and an undefined response when I click on my product:

[nodemon] 2.0.12
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): backend/**/*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node backend/server.js`
serve at http://localhost:5000 [Function (anonymous)]

I’ve tried going through my code a few times and playing around with things to see if there’s an issue with a function but couldn’t see an issue.

This is the code for my server.js:

import express from 'express';
import cors from 'cors';
import { products } from './data.js';
const app = express();

app.use(cors());
app.get('/api/products', (_req, res) => {
    res.send(products);
});
app.get('/api/products/:id')

app.listen(5000, () => {
    console.log('serve at http://localhost:5000', (req, res) => {
        const product = data.products.find((x) => x._id === req.params.id)
        if (product) {
            res.send(product);
        } else {
            res.status(404).send({ message: 'Product Not Found' })
        }

    })
});

This is my config.js:

import axios from 'axios'
import { apiUrl } from "./config"


export const getProduct = async (id) => {
    try {
        const response = await axios({
            url: `${apiUrl}/api/products/${id}`,
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        });

        if (response.statusText !== 'OK') {
            throw new Error(response.data.message);
        }
        return response.data;
    } catch (err) {
        console.log(err);
        return { error: err.message }
    }
};

I’ve just included my util.js and the product screen code below just for a better understanding of what I’m doing, however I think the issue would be in the server.js or config.js.

util.js:

export const parseRequestUrl = () => {
    const url = document.location.hash.toLowerCase();
    const request = url.split('/');
    return {
        resource: request[1],
        id: request[2],
        action: [3],
    };
}

productscreen.js

import { getProduct } from '../api';
import { parseRequestUrl } from '../util'

const ProductScreen = {
    render: async () => {
        const request = parseRequestUrl();
        const product = await getProduct(request.id);
        return `<h1>${product.name}</h1>`;
    }
}
export default ProductScreen;

Answer

You are literally printing the function with console.log by providing it as a second argument. Move the handler function to the appropriate route handler for /api/products/:id, as shown below:

import express from 'express';
import cors from 'cors';
import { products } from './data.js';
const app = express();

app.use(cors());
app.get('/api/products', (_req, res) => {
  res.send(products);
});

// The handler function is moved here from `listen` callback.
app.get('/api/products/:id', (req, res) => {
  const product = data.products.find((x) => x._id === req.params.id);
  
  if (product) {
      res.send(product);
  } else {
      res.status(404).send({ message: 'Product Not Found' });
  }

})

app.listen(5000, () => {
  console.log('serve at http://localhost:5000');
});