Node.js/MongoDB/Express.js Tutorial: Saving and Displaying JSON Data

Introduction

In this tutorial, we will create a Node.js application using Express.js and MongoDB to save JSON data to a database and display it at the root URL.

Prerequisites

• Basic understanding of JavaScript, Node.js, and Express.js
• Node.js installed on your machine
• A MongoDB account and cluster set up (Atlas recommended)

Step 1: Set Up Your Project

Create a new directory for your project and open the folder in VSCode. Then, create a new server.js file and a data.json file in your project directory.

Your empty project should look like this:

📦challenge-6
 ┣ 📜data.json
 ┗ 📜server.js

Initialize a new Node.js project:

npm init -y

Install the required packages:

npm install express mongodb fs

Your empty project should now look like this:

📦challenge-6
 ┣ 📂node_modules
 ┣ 📜data.json
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜server.js

We need to change the import type to ESM imports in order to get our basic application working properly.

In your package.json file we need to change the imports TYPE to "module":

{
  "name": "challenge-6",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "type": "module", // ADD THIS LINE OF CODE !!!
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "fs": "^0.0.1-security",
    "mongodb": "^5.1.0"
  }
}

Now add some sample JSON data to the data.json file.

Copy and paste the following code into the data.json:

[
  {
    "name": "Bass Drum",
    "type": "percussion"
  },
  {
    "name": "Violin",
    "type": "string"
  }
]

Step 2: Set Up Express.js and Connect to MongoDB

In the server.js file, import the required packages, create a variable for your MonogoDB URI and your PORT, and initialize an Express app:

// Imports - NOTICE THE DIFFERENCE - These are ESM imports
import { MongoClient } from "mongodb"; // Mongodb package
import express from "express"; // ExpressJS for our server application
import fs from "fs"; // File system

// Setup variables
const uri = "<your-mongodb-connection-string>"; // URI to mongodb server
const PORT = 3000; // PORT for our server to listen to
const app = express(); // Creating our express server

Replace with your actual connection string:

const uri = "<your-mongodb-connection-string>";

Setup your MongoDB establish a connection to your MongoDB:

• Create your client variable which you will use as your MongoDB connection
• Connect to the client
• access the database on the server called music ... If it does not exist MongoDB will automatically create it
• Define an initial value for your collection sounds

// MongoDB setup
const client = new MongoClient(uri); // Create client - Think of it as a live connection
await client.connect(); // Connect client to server
const database = client.db("music"); // Access the database on server
let soundsCollection = null; // Initial value of sounds collection

Step 3: Create a Database and Collection

Now, let's create a variable called sounds to check if our database already has a collection named sounds:

// Check if there is a collection with the name "sounds" already in the database
let sounds = await database.listCollections({}, { nameOnly: true }).toArray();
sounds.filter((collectionName) => {
  return collectionName === "sounds";
});

IF the collection does not exist, lets do the following:

• Create the required collection, in our case sounds

ELSE:

• If the collection already exists, return the existing collection and store its data in the empty variable we created called soundsCollection

NOTE: Do NOT run this code just yet because we will need to update this function in the next step!

// If it doesnt exist, create it and seed with initial data
if (sounds.length == 0) {
  soundsCollection = await database.createCollection("sounds");
} else {
  // Else return existing collection
  soundsCollection = await database.collection("sounds");
}

Step 4: Read JSON Data from the File System and Add frequency Key / Save JSON Data to MongoDB

Now let's update our function to do the following:

(IF) the collection does not exist the final IF ELSE statement will:

• Create the required collection, in our case sounds
• Get the data from the data.json file
• Loop through the data and manipulate it by adding a key to each object called frequency with a value of High frequency
• Insert the data directly into the collection

(ELSE):

• If the collection already exists, return the existing collection and store its data in the empty variable we created called soundsCollection

// If it doesnt exist, create it and seed with initial data
if (sounds.length == 0) {
  soundsCollection = await database.createCollection("sounds");

  // Get the data from the data.json file
  const filePath = "./data.json";
  const fileContent = fs.readFileSync(filePath, "utf-8");
  const jsonData = JSON.parse(fileContent);

  // Loop through data and add frequency key
  jsonData.forEach((item) => {
    item.frequency = "High frequency";
  });

  // Insert the data directly into the collection
  await soundsCollection.insertMany(jsonData);
} else {
  // Else return existing collection
  soundsCollection = await database.collection("sounds");
}

Step 5: Create a GET Endpoint to Display Data

Create an Express.js GET endpoint that retrieves the data from the MongoDB collection and displays it at the root URL:

// get function to the `/` path = root URL
app.get("/", async (req, res) => {
  // try to get data from soundsCollection and return data 
  // catch error, console.log error and return status code with message
  try {
    const data = await soundsCollection.find().toArray();
    res.json(data);
  } catch (error) {
    console.error("Failed to retrieve documents:", error);
    res.status(500).send("Error retrieving data from the database");
  }
});

Step 6: Putting It All Together

To the bottom of your server.js, using express, set up your server connection with your PORT.

Also add a process that will close the connection to your MongoDB database anytime you kill your server.

// Startup and Cleanup

// Start server
app.listen(PORT, async () => {
  console.log(`Server Started on port ${PORT}`);
});

// Detect when server closes and disconnect from MongoDB server
process.on("SIGTERM", () => {
  app.close(() => {
    client.close();
  });
});

Great!!! Now you are ready to run your code!

Summary

With the completed code in your server.js file, your application should now be able to connect to MongoDB, create a database and collection, read JSON data from a file, add a frequency key with a value of High frequency to each object, save the modified JSON data to the database, and display the data at the root URL using Express.js.

To run the server, simply execute the following command in your terminal:

node server.js

Now, navigate to http://localhost:3000/ in your browser to see the data from the sounds collection in the music database.