Estoy tratando de crear una API Node Express y alojarla en Heroku. Estoy usando React en el front-end para mostrar los datos.
No tengo problemas para mostrar los datos en una lista, pero necesito un enrutamiento dinámico, de modo que cuando el usuario hace clic en uno de los productos, se le redirige a una nueva página con información adicional. Con mi código actual, obtengo un 'Error interno del servidor' y un 404 en el front-end
https://shoppingapiacme.herokuapp.com/shopping/ Esta es una API aleatoria que encontré, pero es un buen ejemplo de lo que estoy tratando de lograr. Si coloca una identificación al final de esta URL, se le redirigirá solo a la información de ese producto.
Aquí hay un enlace al mío: http://tentapinodejs.herokuapp.com/tents/
Tengo muy poca experiencia con Node/Express, por lo que cualquier ayuda sería muy apreciada.
EDITAR: Aquí hay un codeSandbox de React con la otra API de compras que quiero emular. Si trato de obtener los datos de mi API, codesandbox da un error de red. No recibo este error de red cuando uso el enlace en VScode
https://codesandbox.io/embed/cocky-snow-1oi8m?fontsize=14&hidenavigation=1&theme=dark
const express = require('express'); const cors = require('cors') const app = express(); app.use(cors()) const importData = require("./data.json"); let port = process.env.PORT || 3000; app.get('/', (req, res) => { res.send("Hello world") }) app.get('/tents', (req, res)=> { res.send(importData); }) app.get('/tents/:id', function(req , res){ res.render('tents/' + req.params.id); }); app.listen(port, ()=> { console.log(`example app is listening on http://localhost:${port}`); })Entonces, supongo que desea los datos JSON para un producto, en función de la identificación, al igual que su ejemplo.
app.get('/tents/:id', function(req , res){ res.render('tents/' + req.params.id); });Aquí está tratando de representar una vista con el nombre "tiendas/", concatenada por la ID, por ejemplo, una vista llamada "tiendas/1". Si no existe tal vista con ese nombre, provocará el error que está recibiendo.
Mientras que lo que quiere hacer (para lograr el mismo resultado que su ejemplo) es algo como lo siguiente:
app.get('/tents/:id', function(req , res){ const result = importData.filter(data => {return data.id == req.params.id}) res.send(result); });Esto pasará por su matriz importData, encontrará los objetos con la misma ID que la ID del parámetro y lo devolverá al resultado.
Aquí hay un Stackblitz por ilustración: https://stackblitz.com/edit/http-server-ntz1yg?file=server.js
Si cambia la URL en la vista previa a https://http-server-ntz1yg--3000.local.webcontainer.io/tents/ obtendrá todos los datos, si la cambia a https://http-server -ntz1yg--3000.local.webcontainer.io/tents/0 obtendrá los datos para el que tiene ID = 0.