CODEWITHSUNDEEP
node.jsmongodbexpress
Matih Ullah
Matih Ullah

Reputation: 11

display data from mongodb to webpage

https://i.sstatic.net/mRaTJ.png

I am new in nodejs and want to connect the mongo database using express and nodejs. I want my data show from database to webpage.

///// Model schema///////

import mongoose from 'mongoose';

const Schema=mongoose.Schema;

let Data=new Schema({     
    learningEvents:{
        type:String
    },
    learningActivities:{
        type:Array
    },
    indicators:{
        type:Array
    }
});

export default mongoose.model('Data', Data);

//////////// complete code of node js/////////////////

import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';

import Data from './models/data';

import mongoose from 'mongoose';
import data from './models/data';

const app=express();
const router=express.Router();

app.use(cors());
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/data');
const connection=mongoose.connection;

connection.once('open',()=>{
    console.log("Mongodb connected successfully");
});

router.route('/').get((req,res)=>{

        res.send('Hello');

    });

router.route('/data').get((req,res)=>{
    Data.find((err,Data)=>{
        if(err)
        console.log(err);
        else
        res.json(Data);

    });
});

app.use('/',router);

app.listen(4000,()=>console.log('Express server is running on port 4000'));

Upvotes: 0

Views: 367

Answers (1)

Nitin Khare
Nitin Khare

Reputation: 147

To display Dynamic data to webpage you would need to use templating engine like ejs handlebars etc. You can not do the same with html for ex:

    blog.find({}, function(err, blogs){
        if(err){
            console.log("An Error Occured");
            console.log(err);
        }
        else{
            res.render("index",{blogs: blogs});
        }
    });

where index is an ejs file and we pass all the blogs data into it. That can be rendered in the ejs template like

<% blogs.forEach(function(blog){ %>
    <div class = "ui top attached segment">
    <div class = "ui huge header"><%= blog.title %></div>
    <div>
        <div class = "item">
            <img class = "ui centered image"src = "<%= blog.image %>"></img>
        </div>
        <div class = "description">
            <p><%- blog.body.substring(0, 400) %></p>
        </div>
        <a href = "/blogs/<%= blog._id %>">Read More</a>
        <br>
        <div class = "item">
            <span><%= blog.created.toDateString() %></span>
        </div>
        </div>
        <hr>
        </div>
<% }); %>

Link to ejs Docs

Upvotes: 1

Related Questions