DEV Community: Suleman Ahmed

How to Validate Array of Strings using Yup

Suleman Ahmed — Thu, 18 Jul 2024 10:55:29 +0000

Hello! In this tutorial, you'll learn how to validate an array of strings using Yup validation library. First, you'll learn how to validate a string and then apply it to an array. I recently had this problem where the form requires each input field to not be empty. I'll share in this tutorial how I did it.

What is Yup?

Yup is a popular, simple, open-source, run-time validation library for JavaScript (and Typescript). Yup is a JavaScript schema validation library that provides a way to define and validate data schemas in a declarative and easy-to-use manner. It is commonly used in front-end development, particularly with forms and data input validation. Developers can create validation schemas using Yup's API, specifying the shape and constraints of the data they expect.

Introduction

Suppose, you're implementing a form where the user can input multiple emails. You'll have to check if each email is valid but how do you actually create a schema where each email is validated as an email?

import { object, string, array } from 'yup'

const schema = object({
  emails: array() //how do you validate each email in the array as an actual email? 
});

How to Validate Strings

To validate strings in yup, you'll have to use the string() function, and it's other functions.

For example, if you need a valid email you can just use string().email().

import { object, string, array } from 'yup'

const schema = object({
  email: string().email()
});

const isValid = schema.isValidSync({
    emails: ["", "@test.com"],
  });
console.log(isValid); //true which is wrong since they are clearly not emails

If you need a required field, you can use string().required().

import { object, string, array } from 'yup'

const schema = object({
  requiredField: string().required()
});

This is simple enough, now let's apply it to arrays.

How to Validate an Array of Strings in Yup

To validate an array of strings in yup, you'll have to specify the type of array you're going to validate by using the array().of() function. For example:

import { object, string, array } from 'yup'

//1. create a simple validation schema for the string
const requiredEmail = string().email().required("Email is required");

//2. apply it to the array().of() function
const schema = object({
  emails: array().of(requiredEmail)
});

Now when we try to test it again using some data, we get the correct results:

let isValid = schema2.isValidSync({
  emails: ["", "@test.com"],
});
console.log(isValid); //false

isValid = schema2.isValidSync({
  emails: ["hi@test.com", "hello@test.com"],
});
console.log(isValid); //true

How to Validate an Array of Other Types

Similarly, you can use the same technique if you want to validate an array of numbers or any type for that matter. For example:

import { object, string, array, number, boolean } from "yup";

const requiredNumber = number().required();
const optionalBoolean = boolean().optional();
const user = object({
  firstName: string().required(),
  lastName: string().required(),
});
const schema3 = object({
  numbers: array().of(requiredNumber), // array of numbers
  booleans: array().of(optionalBoolean), //array of booleans
  users: array().of(user),  // array of objects
});

That's basically it!

Conclusion

You learned how to validate array of strings when using Yup. You also learned how to validate arrays of other types and create complex array schemas by using the array().of() function. Whatever you can do with a single object, you can also do it with arrays.

How to Connect MongoDB with Node.js: A Comprehensive Guide

Suleman Ahmed — Mon, 15 Jul 2024 04:42:27 +0000

Connecting MongoDB with Node.js is a crucial skill for modern web developers. In this guide, we’ll walk you through the process step-by-step, ensuring you can easily integrate these powerful technologies.

Introduction

MongoDB, a leading NoSQL database, is renowned for its flexibility and scalability. You can build efficient and scalable web applications with Node.js, a powerful JavaScript runtime. Let’s dive into the steps to make this connection seamlessly.

Prerequisites
Setting up MongoDB
Initiating a Node.js Project
Connecting to MongoDB using Mongoose
Testing the Connection
Conclusion

1. Prerequisites

Basic understanding of JavaScript and Node.js.
Node.js and npm (Node Package Manager) are installed on your system.
A MongoDB account and local/remote MongoDB server.

2. Setting up MongoDB

Start by installing MongoDB on your machine or setting up a cloud instance via MongoDB Atlas. Save your connection string, as you’ll need it shortly.

Setting Up MongoDB on MongoDB Atlas

2.1 Sign Up or Log In

Go to the MongoDB Atlas website: https://www.mongodb.com/cloud/atlas
If you’re new to MongoDB Atlas, sign up for a new account. Otherwise, log in with your credentials.

2.2 Create a New Cluster

Once logged in, click on the “Create New Cluster” button.
MongoDB Atlas offers a free tier known as the M0 Sandbox. This is a good starting point for beginners or small projects.

2.3 Choose a Cloud Provider and Region

Select your preferred cloud provider (AWS, Google Cloud, or Azure).
Pick a region. Some regions support the free tier, so be sure to pick a region that’s closest to your primary user base to reduce latency.

2.4 Configure Cluster Settings

While the default settings are suitable for most use cases, you can modify the cluster’s name and other settings if necessary.

2.5 Add Additional Configuration (Optional)

Under additional settings, you can configure backups, enable monitoring, or make other advanced configurations. For most beginners, the default settings are sufficient.

2.6 Set Up Network Access

Click on the “Database Access” section in the left panel.
Add a new user with a username and a strong password. Remember these credentials as you’ll need them to connect your application to MongoDB.
Under the “IP Whitelist” tab, click “Add IP Address”. For security, only whitelist the IPs that need access. For development purposes, you might choose to “Allow Access from Anywhere”, but this is not recommended for production environments due to security concerns.

2.7 Get Your Connection String

Once the cluster is up and running, click on the “CONNECT” button.
Choose “Connect your application”.
Select your driver version and copy the connection string. This is the string you’ll use in your application to connect to MongoDB. Replace in the connection string with the password for the MongoDB user you created earlier.

2.8 Connect Your Application

Use the copied connection string in your application to start interacting with your MongoDB cloud instance.

2.9 Monitor and Manage

MongoDB Atlas provides a dashboard where you can monitor queries, performance, and other metrics. Regularly check this to ensure the health and performance of your database.

3. Initiating a Node.js Project

In your terminal or command prompt:

mkdir mongo-node-connection
cd mongo-node-connection
npm init -y

The above code creates a new Node.js project.

4. Connecting to MongoDB using Mongoose

Mongoose is a popular ODM (Object Document Mapper) that facilitates the connection between Node.js and MongoDB.

Install mongoose:

npm install mongoose

Connect to MongoDB:

const mongoose = require('mongoose');

// Your MongoDB connection string
const dbURI = 'YOUR_MONGODB_CONNECTION_STRING';

mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to MongoDB'))
  .catch((error) => console.error('Connection error', error));

Note: Replace 'YOUR_MONGODB_CONNECTION_STRING' with your actual MongoDB connection string.

5. Testing the Connection

To verify the connection:

Create a simple schema and model using Mongoose.
Insert a document into the MongoDB collection.
Fetch and log the document to the console.

const testSchema = new mongoose.Schema({
  name: String,
  testField: String
});

const TestModel = mongoose.model('Test', testSchema);

const testData = new TestModel({
  name: 'Node-Mongo Connection Test',
  testField: 'It works!'
});

testData.save()
  .then(doc => {
    console.log('Test document saved:', doc);
  })
  .catch(error => {
    console.error('Error saving test document:', error);
  });

Run your Node.js script, and if everything is set up correctly, you should see your test document logged in the console.

6. Conclusion

Connecting MongoDB with Node.js can enhance your web applications by providing a robust database solution. By following this guide, you’ve set up a foundational connection using Mongoose, paving the way for more advanced operations and queries in the future.

Exploring JavaScript Array Methods with Examples

Suleman Ahmed — Sat, 13 Jul 2024 04:56:40 +0000

JavaScript arrays are versatile and offer a wide range of built-in methods to manipulate, iterate, and manage data efficiently. Understanding these methods is crucial for effective programming. Let's delve into some commonly used array methods with practical examples.

Array Methods

push(): Adds one or more elements to the end of an array and returns the new length of the array.

let fruits = ['apple', 'banana'];
fruits.push('orange');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']

pop(): Removes the last element from an array and returns that element.

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'

shift(): Removes the first element from an array and returns that removed element.

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'

unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']

forEach(): Executes a provided function once for each array element.

let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});

map(): Creates a new array populated with the results of calling a provided function on every element in the calling array.

let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]

filter(): Creates a new array with all elements that pass the test implemented by the provided function.

let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]

find(): Returns the first element in the array that satisfies the provided testing function.

let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30

reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)

indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0

lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.

let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3

These array methods are fundamental tools for manipulating data structures in JavaScript efficiently. By mastering these methods, you'll gain a powerful toolkit for handling arrays in various programming scenarios.

DEV Community: Suleman Ahmed

How to Validate Array of Strings using Yup

What is Yup?

Introduction

How to Validate Strings

How to Validate an Array of Strings in Yup

How to Validate an Array of Other Types

Conclusion

How to Connect MongoDB with Node.js: A Comprehensive Guide

Introduction

Table of Contents

1. Prerequisites

2. Setting up MongoDB

Setting Up MongoDB on MongoDB Atlas

3. Initiating a Node.js Project

4. Connecting to MongoDB using Mongoose

5. Testing the Connection

6. Conclusion

Exploring JavaScript Array Methods with Examples

Array Methods