Reputation: 105
I made a web application that uses Firebase for storage and MongoDB atlas as a database. I made a schema that stores file paths and titles for one section. Then I also added another schema to my app in order to create another collection in the same database. Now the main problem that I am facing is that I am not able to retrieve data from my second collection to my index.ejs page. Here is my code:
//MongoDB init
mongoose.connect(
"mongodb+srv://<My_DB>:<MY_DB_pass>@cluster0.cqqda.mongodb.net/proDB?retryWrites=true&w=majority"
);
mongoose.set("useCreateIndex", true);
const connectionParams = {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true,
};
mongoose
.connect(url, connectionParams)
.then(() => {
console.log("Connected to database ");
})
.catch((err) => {
console.error(`Error connecting to the database. \n${err}`);
});
mongoose.set("useCreateIndex", true);
const dbName = "proDB";
const userSchema = mongoose.Schema({
title: String,
filepath: String,
});
const testSchema = mongoose.Schema({
secondTitle: String,
secondFilePath: String,
});
testSchema.plugin(findOrCreate);
userSchema.plugin(passportLocalMongoose);
userSchema.plugin(findOrCreate);
//DATABASE MODEL
const User = new mongoose.model("User", userSchema);
const Test = new mongoose.model("Test", testSchema);
Index route:
app.get("/", function (req, res) {
User.find({}, function (err, foundItems) {
// console.log(foundItems);
res.render("index", { newListItems: foundItems });
});
});
EJS code: This code renders data from my first collection
<% newListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div " >
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;"
width="auto"
height="220" controls>
<source src="<%=item.filepath%>" type="video/mp4">
</video>
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.title%>
</p>
</div>
</div>
<% }) %>
Second EJS code that in which I am trying to render data from my second collection
<% newListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div ">
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;" width="auto"
height="220"
controls>
<source src="<%=item.secondFilePath%>" type="video/mp4">
</video>
<!-- <img style="width: 100%; height: auto;" src="" alt=""> -->
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.secondPodcastTitle%>
</p>
</div>
</div>
<% }) %>
Upvotes: 0
Views: 97
Reputation: 7905
Change your route function to query the other collection as well:
app.get("/", function (req, res) {
User.find()
.then(newListItems => {
Test.find() // <- Your other collection
.then(testListItems => {
res.render("index", { newListItems, testListItems });
})
})
});
Then in your EJS, do this:
<% newListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div " >
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;"
width="auto"
height="220" controls>
<source src="<%=item.filepath%>" type="video/mp4">
</video>
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.title%>
</p>
</div>
</div>
<% }) %>
...
...
<% testListItems.forEach(function(item){ %>
<div class="col-xs-6 col-sm-4 video-div ">
<!-- before col-sm -->
<div class="main-video">
<video style="outline: none; width: 100%; height: 200px;" width="auto"
height="220"
controls>
<source src="<%=item.secondFilePath%>" type="video/mp4">
</video>
<!-- <img style="width: 100%; height: auto;" src="" alt=""> -->
</div>
<div class="video-title" style="width: 50%;">
<p class="podcast-title">
<%=item.secondTitle%>
</p>
</div>
</div>
<% }) %>
Note that you had <%=item.secondPodcastTitle%>
in your original ejs. This is not consistent with your schema which does not have secondPodcastTitle
. It has secondTitle
so I change the ejs to: <%=item.secondTitle%>
Upvotes: 1