Connecting front end to Mongodb - node.js

Question

I am a beginner in coding, so please take it easy. I have built a database with node.js and mongodb. I am receiving sensor reads from an IoT device through a web sockets connection and am logging those entries to the database. This is my server code:
const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
const expressWs = require('express-ws');
const Temperature = require('./models/temperature.model');
const Humidity = require('./models/humidity.model');
const Pressure = require('./models/pressure.model');
require('dotenv').config();
// This is to create the express server and what port it will be on
const app = express();
const port = process.env.PORT || 8080;
// This is the middleware, this will allow it to parse JSON because the server will be receiving JSON
app.use(cors());
app.use(express.json());
const wsInstance = expressWs(app);
// The uri is where the database is stored, start connection to database
const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true });
const connection = mongoose.connection;
connection.once('open', () => {
console.log("MongoDB database connection esablished successfully");
})
// Importing files
const temperatureRouter = require('./routes/temperature');
const humidityRouter = require('./routes/humidity');
const pressureRouter = require('./routes/pressure');
const router = express.Router();
// The connection to the web sockets where the sensor reads are received
app.ws('/sendData', (ws, req) => {
ws.on('message', function incoming(message) {
console.log(message);
ws.broadcast(message);
const tempData = message.slice(0, 5);
const humidData = message.slice(6, 11);
const pressureData = message.slice(12, 21);
const temperature = new Temperature({
temperature: tempData,
});
temperature.save();
const humidity = new Humidity({
humidity: humidData,
});
humidity.save();
const pressure = new Pressure({
pressure: pressureData,
});
pressure.save();
});
ws.broadcast = function broadcast(data) {
wsInstance.getWss().clients.forEach(function each(client) {
client.send(data);
});
};
})
app.use('/temp', temperatureRouter);
app.use('/humidity', humidityRouter);
app.use('/pressure', pressureRouter);
// This is what starts the server and listens on that port
app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
});
Now I am trying to retrieve that data in my front end to display in a graph but do not understand why I am not receiving it. This is my front end code:
import React, { useEffect, useState } from 'react';
function DevExpressCharts() {
const [temperatures, setTemperatures] = useState([{
temperature: '',
date: ''
}])
useEffect(() => {
fetch('/temperatures').then(res => {
if(res.ok) {
return res.json()
}
}).then(jsonRes => setTemperatures(jsonRes))
})
return (
<div>
<h1>hello</h1>
{temperatures.map(temperature =>
<div>
<h1>{temperature.temperature}</h1>
</div>
)}
</div>
)
}
export default DevExpressCharts;
Routes:
const router = require('express').Router();
let Temperature = require('../models/temperature.model');
router.route('/temperatures').get((req, res) => {
Temperature.find()
.then(foundTemperature => res.json(foundTemperature))
.catch(err => res.status(400).json('Error: ' + err));
});
module.exports = router;
Models:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const temperatureSchema = new Schema({
temperature: { type: String, required: true },
}, {
timestamps: true,
});
const Temperature = mongoose.model('Temperature', temperatureSchema);
module.exports = Temperature;
Any help is greatly appreciated.

Answer 1

You should try changing this and check if this solves your problem or not.
Point-1:
Did u check if the api endpoint is giving proper responses in postman or any other api tester.
Point-2:
I noticed you are finding temperature collections from the database using .find().
Try doing it likewise:
const tempData=await Temperature.find();
if(tempData) return res.send(tempData);
Point-3:
Assuming your TemperatureRoute contains the router of the temperature. If so, then
your api should look like this: http://xyz.domain/temp/Temperature
Point-4:
Your fetch api should like this:
// get all collections
fetch("http://xyz.domain/temp/temperatures", {
"method": "GET"
})
.then(response => response.json())
.then(response => {
this.setState({
... //perform operations
})
})
.catch(err => { console.log(err);
});
I hope this solves your problem..