Having issues pulling data from my database and populating it (ById) onto the my Vue view (using Axios). Backend is Node/Express

Question

I know by the console that the route is pointing it to the correct Id number, but it's throwing a 404 and I'm not sure where the connection is going bad.

PrizesById is essentially a duplicate of another route holding data called Prizes. I wasn't sure if recreating two separate places to pull identical data would be a way to do this, as I couldn't find a way to do it for prizes. Both are required the same way.

This is a sample of my prizesbyid.js (in routes):

  const express = require('express');
  const router = express.Router();

  router.get('/', (req, res) => {
    res.send({
        "prizesbyid": [{
                id: 1,
                name: "Cordoba C5",
                description: "The Cordoba C5 Classical Guitar is perfect for any aspiring classical guitarist or steel-string/electric wizard looking to take a walk on the wild nylon-string side. The solid cedar top produces amazingly rich tone while the wide string placement, easy string tension, and low action make it a breeze to play.",
                image_url: "../assets/c5Cor.jpg",
                quantity: 5
            },
            {
                id: 2,
                name: "Merano MC400 Cello",
                description: "Established in 2000, Merano have made it their mission to create affordable, beautifully crafted instruments. They offer brass, wind and stringed instruments all at reasonable prices. They have a large team of artisans who look over every instrument to ensure it maintains high standards. Many of their instruments are aimed at the beginner market but they also offer some fine examples of professional equipment as well.",
                image_url: "",
                quantity: 3
            },
            {
                id: 3,
                name: "Guarnerius del Gesu",
                description: "A repreduction of the most expensive violin in the world, selling for an estimated $16million. The owner of the original anonymously donated the historic instrument to violinist Anne Akiko Meyers, on loan for the rest of her life.",
                image_url: "",
                quantity: 7
            }
        ]
    })
  })

  module.exports = router;

I'm requiring it through my app.js like this:

const prizesByIdRouter = require('./routes/prizesbyid');
app.use('/prizesbyid', prizesByIdRouter);

And the front end axios call is:

getPrizeById () {
  axios.get('http://localhost:3000/prizebyid/' + this.prizeId).then(response => {
    this.prize = response.data.prize
  })
}

Answer 1

It's actually easier if you rename everything to the /prizes route. In your prizes.js routes:

const express = require('express');
const router = express.Router();

const prizes = [...];  // Extracted all data outside of the routes

router.get("/:id?", (req, res) => {
    if (req.params.id !== undefined) {
        // Send one by id
        const result = prizes.find(prize => prize.id === +req.params.id);
        res.status(200).send(result);
    } else {
        // Send all
        res.status(200).send(prizes);
    }
});

module.exports = router;

In your app.js:

const prizesRouter = require('./routes/prizes');
app.use('/prizes', prizesRouter);

The route allows for an optional ID parameter. If it's passed, the route will find the ID in the data and send back the appropriate result. If no ID is passed, the route will pass back all data.