DEV Community: Mamun Hossain

How to convert a Set to an Array? – JavaScript

Mamun Hossain — Sat, 27 Feb 2021 07:09:48 +0000

When you remove the duplicate numbers from an array with new Set() method, it turns into a set instead of an array like this

let duplicates = [1,2,3,4,5,6,2];

// remove the duplicates

let noDuplicates = new Set(duplicates);

// output Set {1,2,3,4,5,6}

Duplicates may happen by posting/collecting same value from one/different sources, or by concat() arrays.

And you can convert that set to an array again.

Solution 1:

let duplicates = [1,2,3,4,5,6,2];

// remove the duplicates

let noDuplicates = new Set(duplicates);

// output {1,2,3,4,5,6}

let arrayWithNoDuplicates = Array.from(noDuplicates);

// output [1,2,3,4,5,6]

Solution 2:


let duplicates = [1,2,3,4,5,6,2];

// remove the duplicates

let noDuplicates = new Set(duplicates);

// output {1,2,3,4,5,6}

let arrayWithNoDuplicates = [...noDupicates];

// output [1,2,3,4,5,6]

Solution 3:

let duplicates = [1,2,3,4,5,6,2];

let noDuplicates = Array.from(new Set(duplicates))

// output [1,2,3,4,5,6]

Solution 4:

let duplicates = [1,2,3,4,5,6,2];

let noDuplicates = [... new Set(duplicates)];

// output [1,2,3,4,5,6]

Apply

let a = [1,2,3,4];
let b = [5,6,2];

let c = a.concat(b);
let d = new Set(c);
let e = Array.from(d);

// or in one line

let f = Array.from(new Set(a.concat(b)));

Source : How to convert a Set to an Array? – JavaScript | tradecoder

How to get only required data fields from mongoDB

Mamun Hossain — Wed, 09 Dec 2020 10:56:42 +0000

If you are looking for a solution to get only the required fields data from mongoDB, this simple solution can help you without any side effect

Say, you have this data fields in your database

        meetingId,
        meetingDate,
        noticeDate,
        title,
        agenda,
        venue,
        notice,
        noticeDistribution,
        chairedBy,
        participants,
        minutes,
        minutesPreparedBy,
        minutesApprovedBy,
        minutesDistribuion,
        status,
        username,
        userid

But you need to send only minutes and minutesApprovedBy fields, then you can go this way,

yourDB.find({}, {minutes:true, minutesApprovedBy:true})
.then(data=>res.send(data))
.catch(err=>res.send(err))

The field you need, put together with a value to true as shown above. This will return only those fields (filter) from the database. You can also use findOne({}, {}) where necessary.

How to run Front End and Backend together in React.js and Express.js with 'concurrently' package

Mamun Hossain — Sun, 08 Nov 2020 10:21:17 +0000

Run Front End and Backend Concurrently

If you are looking for a way to run Front End and Backend together with React.js and Express.js, you may simply follow these steps:

Step 1:

Install 'concurrently'

npm install concurrently --save

Step 2:

Find the script start in package.json file

By default the script looks like this

"start": "react-scripts start",

First add concurrently to that script like this with backslashes and quote marks

"start": "concurrently \"react-scripts start\" ",

Look, now if you run npm start it will call concurrently first which will run the 'react-scripts start' command and if you want to add more command you have to add the scripts (commands) like the above format with backslashes and quote marks for each scripts, let's do it in the next step

Step 3:

Add more scripts to concurrently. Now, if we have a backend folder with backend codes, first we need to move onto the backend directory (cd backend) (use necessary command to move onto your relevant folder), then at the same time we will call nodemon which will run our server.js file (nodemon server), let's do it

"start": "concurrently \"react-scripts start\" \"cd backend && nodemon server\"",

That's it. Now you can use a single command and run front end and backend concurrently from your main/root project folder.

npm start

How to fix - UnhandledPromiseRejectionWarning: MongoParseError: URI does not have hostname, domain name and tld

Mamun Hossain — Thu, 05 Nov 2020 08:59:57 +0000

A solution for MongoParseError (UnhandledPromiseRejectionWarning: MongoParseError: URI does not have hostname, domain name and tld... )

(node:2436) UnhandledPromiseRejectionWarning: MongoParseError: URI does not have hostname, domain name and tld
    at parseSrvConnectionString (E:\mern\mongo-office\backend\node_modules\mongodb\lib\core\uri_parser.js:45:21)
    at parseConnectionString (E:\mern\mongo-office\backend\node_modules\mongodb\lib\core\uri_parser.js:587:12)
    at connect (E:\mern\mongo-office\backend\node_modules\mongodb\lib\operations\connect.js:282:3)
    at E:\mern\mongo-office\backend\node_modules\mongodb\lib\mongo_client.js:223:5
    at maybePromise (E:\mern\mongo-office\backend\node_modules\mongodb\lib\utils.js:662:3)
    at MongoClient.connect (E:\mern\mongo-office\backend\node_modules\mongodb\lib\mongo_client.js:219:10)
    at E:\mern\mongo-office\backend\node_modules\mongoose\lib\connection.js:791:12
    at new Promise (<anonymous>)
    at NativeConnection.Connection.openUri (E:\mern\mongo-office\backend\node_modules\mongoose\lib\connection.js:788:19)
    at E:\mern\mongo-office\backend\node_modules\mongoose\lib\index.js:342:10
    at E:\mern\mongo-office\backend\node_modules\mongoose\lib\helpers\promiseOrCallback.js:31:5
    at new Promise (<anonymous>)
    at promiseOrCallback (E:\mern\mongo-office\backend\node_modules\mongoose\lib\helpers\promiseOrCallback.js:30:10)
    at Mongoose.connect (E:\mern\mongo-office\backend\node_modules\mongoose\lib\index.js:341:10)
    at Object.<anonymous> (E:\mern\mongo-office\backend\server.js:11:10)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:2436) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:2436) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with
a non-zero exit code.

If you think everything in your MONGO_URI is ok but face this problem with mongoDB connection,

you can simply solve this issue by following these steps:

Check your MONGO_URI in .env file if your password has any special character like #, @, ! and so on.

If found, just change your password from the MongoDB account for that database username and make it without those characters. Use the new password to your MONGO_URI.

The problem is solved! Now run the server again.

How to fix the value of dynamically generated html id attribute

Mamun Hossain — Mon, 31 Aug 2020 05:50:03 +0000

The main issue:

If you set a value to an id attribute started with a number, CSS won't work with that and the navigation to that id will fail to execute.

A short description:

If you need to set the value of id (s) from a unique data source, if the source-data contains such a value started with a number, if you need to set target to that id in your project, your code won't work with that part, and it will be very difficult to find out the problem if the project is a big one.

Sometimes, you can not imagine the reason behind this issue because the other parts with the same code will be working!

So, it is very common to get trouble while generating it automatically from a data source.

How to solve this issue:

To solve this issue we can add a text before the source data, like:

id={`mytext${source-data}`}

and set the target value like this:

{`#mytext${source-data}`}

This is just an example (JavaScript, React.js), you need to follow your own code relevant syntax to implement the solution.

Follow me on:
LinkedIn
GitHub
Twitter

How to run useEffect() only once in React.js - (React Hooks)

Mamun Hossain — Sat, 29 Aug 2020 05:37:49 +0000

import {useEffect} from "react";

Just add an empty array
after the callback function
separated by a comma

useEffect(callback, []);

useEffect(()=>{}, []);

Why do you need to run useEffect() only once?

When you setState inside useEffect() from a data source, it will be continuously updating with the source value, and outside the useEffect() if you have an onChange event handler to setState to another value- that won't work. To solve this, you need to call useEffect() only once.

How to fix error- nodemon.ps1 cannot be loaded because running scripts is disabled on this system

Mamun Hossain — Sat, 15 Aug 2020 06:03:23 +0000

A solution for running nodemon on local machine error on Windows :

nodemon.ps1 cannot be loaded because running scripts is disabled on this system. For more 
information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.

So if you ever get this error, simply you can follow these steps to solve the issue-

Step 1:

Open Windows PowerShell with Run As Administrator.

Step 2:

As you see the error is about_Execution_Policies, first to see what's there in the present execution policy. Use this command on Windows PowerShell to get it

Get-ExecutionPolicy

Here you'll see 'Restricted'. So, this is the main reason- running scripts on this system is 'Restricted'.

Step 3:

Now we need to change this policy to allow the operation. Use this command to make it Unrestricted -

Set-ExecutionPolicy Unrestricted

Here you'll get a prompt message. Press Y to change it

That's it. To ensure, you may check the execution policy status by this command again

Get-ExecutionPolicy

You'll get the output 'Unrestricted'

The problem is solved. Now you can use nodemon on your machine.

D3js Treemap Diagram

Mamun Hossain — Wed, 15 Jul 2020 11:03:57 +0000

Data presentation with D3js and Reactjs. Best selling movies, A #freeCodeCamp data-visualization project.

Need your valuable feedback on the project for any development.

Thank you.

Data visualization with D3js Choropleth Map

Mamun Hossain — Sun, 12 Jul 2020 04:23:14 +0000

Here is my first D3js Choropleth Map project as a learning progress, United States Educational Attainment Presentation. need your valuable feedback.

Thank you.

CSS Transform Effects

Mamun Hossain — Sun, 05 Jul 2020 15:38:25 +0000

Global Heat Map - A simple project with D3 & React on CodePen

Mamun Hossain — Sat, 04 Jul 2020 05:18:05 +0000

I would expect some your valuable feedback with code review on the project.

Thank you.

D3js Scatterplot Presentation

Mamun Hossain — Tue, 30 Jun 2020 06:49:13 +0000

A simple scatterplot presentation using (codepen) D3js and Reactjs