I'm working on a plain Javascript project that consumes data the Nasa Mars Rover api, and using Immutable Js, pure functions and functional programming displays images and info to the page using a store to hold the app state.
The project has a backend server using Node Express that fetches useing async-await, and then the frontend should fetch from the server. I'm a newbie to using Node Express, and i'm finding that the data is showing up as undefined in the Chrome Dev Tools Network Tab. In the console it seems that the catch clause runs and prints the error there. I've tried different various things, but nothing seems to work. Please help?
My Immutable store
let store = Immutable.Map({
rovers: Immutable.List(["Curiosity", "Opportunity", "Spirit"]),
roverInfo: Immutable.Map({}),
});
from my index.js server
// Fetching rover photos from the Mars api
app.get('/rovers/:rover', async (req, res) => {
const rover = req.params;
try {
let images = await fetch (`https://api.nasa.gov/mars- photos/api/v1/rovers/${rover}/latest_photos?api_key=${apiKey}`)
.then((res) => res.json());
res.send({images});
} catch (error) {console.log('error:', error);
} });
// fetching rover info on the selected rover from the Mars api
app.get('/manifests/:chosenRover', async (req, res) => {
const chosenRover = req.params;
try {
let data = await fetch (`https://api.nasa.gov/mars-photos/api/v1/manifests/${chosenRover}?api_key=${apiKey}`)
.then((res) => res.json()); res.send({data});
} catch (error) {console.log('error:', error); }
});
from my client.js frontend
const roverImage = (store, rover) => {
const images = fetch(`http://localhost:3000/rovers/${rover}`)
.then((res) => res.json())
.then((rover) => console.log(rover))
.then((rovers) => updateStore(store, { rovers }));
// return rovers;
};
const getRoverInfo = ( store, chosenRover) => {
const roverInfo = fetch(`http://localhost:3000/manifests/${chosenRover}`)
.then((res) => res.json())
.then((chosenRover) => console.log(chosenRover))
.then((roverInfo) => updateStore(store, { roverInfo }));
// return chosenRover;
};
update:
I was advised to show examples of the errors- so here they are
Req.params returns an object of possible values passed through the url. For example: https://test.com/rovers?name=Sojourner&size=25
If those were my parameters, the way to get them is as follows:
const rover = req.params;
console.log(rover.name, rover.size);
output: Sojourner 25
What you are doing is pasting the object directly into the url you are querying, which causes the error.
As you do it, your rover variable will have the following value
{
name: Sojourner,
size: 25
}
which is an object and not a string as it should be.
EDIT.
I forgot that you are passing the parameter directly in the url. And to solve your problem simply add .rover to the req.params.
// Example test API
// http://localhost:3000/rovers/curiosity
app.get('/rovers/:rover', async (req, res) => {
const rover = req.params.rover;
try {
let images = await fetch (`https://api.nasa.gov/mars- photos/api/v1/rovers/${rover}/latest_photos?api_key=${apiKey}`)
.then((res) => res.json());
res.send({images});
} catch (error) {console.log('error:', error);
} });
Another example from https://expressjs.com/en/guide/routing.html
Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }
req.params.userId: 34
req.params.bookId: 8989