How to display Mongo data in Front End in MERN

Question

I am working in MERN Stack and i am stuck at a part where i have to display the data of MongoDB compass on the Web page in a designed way i am able to display all the data on the web page by using the code given below but not in a designed way:

//to view database form mongodb
const express = require('express') 
const MongoClient = require('mongodb').MongoClient

const app = express()

app.use(express.json())
var database
var dess

app.get('/', (req, resp) => { resp.send('Welcome to mongodb API')
})

app.get('/d',(req, resp) => {
//enter the table name
database.collection('exps').find({}).toArray((err,result) => {
if(err) throw arr 
resp.send(result)
})
})

app.listen(8888, () => {
MongoClient.connect('mongodb://localhost:27017',{useNewUrlParser:true},(error, result) =>{
if(error) 
throw error
//enter the datbase name
database=result.db('Experimental')
console.log("Connection sucessfull")
})
})

The PROBLEM is i WANT to add template to the data whatever it is displaying on the front end from the mongodb. The above code is working fine it is displaying the RAW data from the mongodb my only problem is i want to fetch the data form the mongoDB and display it on the Front End by adding some design on it just like the way we do it with JSON file by importing it in REACT.js.

Answer 1

All You got to do is use:

import {useEffect,useState } from "react";
 
//use it inside your function component in JS file and make sure your //server 3001 is runing by using express
function abcd(){

const [object, setObj] = useState([
    {
      title: "",
      description: "",
      url: "",
    },
  ]);

  useEffect(() => {
    fetch("http://localhost:3001/pages")
      .then((res) => res.json())
      .then((jsonRes) => setObj(jsonRes));
  }, []);


//Render

return(
 <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "20%",
          margin: "auto auto",
        }}
      >
        {object
          .sort((a, b) => {
            var titleA = a.title;
            var titleB = b.title;
            if (titleA < titleB) {
              return -1;
            }
            if (titleA > titleB) {
              return 1;
            }
            return 0;
          })
          .map((Ob) => {
            return (
              <img
                key={Ob.title}
                src={Ob.url}
                alt={Ob.description}
                name={Ob.title}
                onClick={handleClick}
              ></img>
            );
          })}
      </div>)
}

//Use the below code in your BackEnd in order to fetch all the data from the //MongoBackEnd(Express)
//Use your MongoDB server address and mongoSchema and store it in a //Variable("Handle")

const Handle = require("./views/mongoschema");

  app.get("/pages", (req, res) => {
      Handle.find({})
        .then((items) => res.json(items))
        .catch((err) => console.log(err));
    });

By doing the above things you can fetch all the MongoDB data in the frontEnd and add designs or Templates to it.