DEV Community: Nischal Dahal

How to remove duplicate values from an array of objects and everything you need to know about arr.REDUCE in Js. 🚀

Nischal Dahal — Tue, 21 Feb 2023 06:25:35 +0000

So basically why this post will be useful to you? Before you deep dive into the blog blink your eye here for a second!
let me answer, Suppose you have your array, something looks like this: #1

const array = [
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "size", properties: "3xl" },
{ name: "size", properties: "3xl" },
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "color", properties: "blue" },
{ name: "color", properties: "black" },
{ name: "size", properties: "3xl" },
];

and you want your array seems something like this :


[
  { name: "ram", properties: [ "4gb", "3gb" ]},
  { name: "size", properties: [ "2xl", "3xl" ]},
  { name: "color", properties: [ "red", "blue", "black" ]},
]

Can you think about a second and build your own logic without help from any resources ? explore : scroll !

aww 😢 returned scroll ;

Let's have another practical use case of Reduce : #2


const peoples = [
  { name: "Nischal", heightInFeet: 5.8, age: 16 },
  { name: "Sudip", heightInFeet: 5.7, age: 16 },
  { name: "Nuri", heightInFeet: 6.1, age: 20 },
  { name: "Ankita", heightInFeet: 4.6, age: 19 },
];

and you want to create a new array where users are stored in the index of age :

console.log(filteredDeoples)Here you will see 16, 19, and 21 as the key of the object which has a value of an array of users, so how can you fulfill this via reduce ?
Lastly!

Bonus for you! forEach ~ first array data


const count = {};
array.forEach(function (i) {
  if (!count[i.name]) {
    count[i.name] = 0;
  }
  count[i.name]++;
});

console.log(count);

Output :

Lets' use another case for reduce and I promise this is the last one 😢😆

3


const users = [
  { name: "Nischal", heightInFeet: "5.8", age: 16 },
  { name: "Sudip", heightInFeet: "5.4", age: 21 },
  { name: "Nuri", heightInFeet: "6.1", age: 19 },
  { name: "Ankita", heightInFeet: "4.4", age: 19 },
];

Here above we have an array of users and each has the value of name, heightInFeet which represent their height in feet lastly we have the age of each user stored in the array,
and Here we faced, that we need to filter the users via the height, ok confusing? if then I will elaborate I want the object of height like 5, 6, and so on which should contain the users who have the height in that range so without looking at my code you can try to decode using simple code, firstly you can definitely try without using reduce array function and after that, you can use the reduce function of the array to do the job!

Here I have the code of the section top users array,


const res = users.reduce((usersHeight, curr) => {
  const { heightInFeet } = curr;
  const height = Math.floor(heightInFeet).toString() + "ft";
  if (usersHeight[height] == null) usersHeight[height] = [];
  usersHeight[height].push(curr);
  return usersHeight;
}, {});

The Output of the above console.log(res) is :

ok, let's DECODE how this reduce function works after a lot of examples and code we have practiced and tried now, pretend you completely know about the reduce function in javascript I will try to explain using the diagram.

Reduce itself the name says it is reducing the array according to your needs, at simple it just mean that reduces the array, into the smaller and needed one !
What MDN docs says?

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

Simplify reduce

reduce method takes two different parameters, first one is the function here in the case we have arrow function and second parameter is going to be your starting value!

accumulator : It accumulates and reduce the return value !
currentValue : It is the each individual item we are looping through.
currentIndex : It is the third last parameter of the index inside the array
array : It is the last parameter of the method and accepts array


reduce((accumulator, currentValue, currentIndex, array) => 
{ /* … */ }, initialValue)

but that one is harder let's understand it from the basics,

here is the code of the first example ~ #1


const array = [
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "size", properties: "3xl" },
{ name: "size", properties: "3xl" },
{ name: "ram", properties: "4gb" },
{ name: "size", properties: "2xl" },
{ name: "color", properties: "red" },
{ name: "color", properties: "blue" },
{ name: "color", properties: "black" },
{ name: "size", properties: "3xl" },
];
const result = array.reduce((acc, curr) => {
  const { name, properties } = curr;
  if (!acc.some((item) => item.name === name)) {
    acc.push({ name, properties: [properties] });
  } else {
    const index = acc.findIndex((item) => item.name === name);
    if (!acc[index].properties.includes(properties)) {
      acc[index].properties.push(properties);
    }
  }
  return acc;
}, []);

here is how you can accomplish it without using reduce array method,


const temp = [];
const filteredValues = [];
array.forEach((val) => {

// -1 represents not match found, it checks true if not the match found 
  if (temp.indexOf(val.name) === -1) {
    temp.push(val.name);

    filteredValues.push({ name: val.name, properties: [] });
  }
});

array.forEach((v) => {
  filteredValues.forEach((item) => {
   if (v.name === item.name) {
      if (item.properties.indexOf(v.properties) === -1) {
        item.properties.push(v.properties);
        temp.push(item.name);
      }
    }
  });
});

console.log(filteredValues);

here is the code for the second example ~ #2


let result = users.reduce((groupedPeoplesViaAge, person) => {
  const { age } = person;

  if (groupedPeoplesViaAge[age] == null) groupedPeoplesViaAge[age] = [];

  groupedPeoplesViaAge[age].push(person);

  return groupedPeoplesViaAge;
}, {});

Practice more and learn more! Explore, learn, Earn 🚀

Bonus use case and understanding of reduce in Javascript !

const arr1 = [
  { name: 'Nischal Dahal', goals: 0, assists: 0, points: 0 },
  { name: 'Sudip Mahato', goals: 2, assists: 1, points: 3 },
  { name: 'Ankita ', goals: 1, assists: 1, points: 2 },
  { name: 'Santosh Dahal', goals: 5, assists: 7, points: 12 },
  { name: 'neeswebservices', goals: 5, assists: 7, points: 12 },
  { name: 'Cat', bones: 100000, goals: 5, assists: 7, points: 12 },
];

const arr2 = [
  { name: 'Noob player', goals: 3, assists: 3, points: 6, ppg: 0, ppa: 0, pims: 0, },
  { name: 'Achuta Ghimire', goals: 1, assists: 4, points: 5, ppg: 0, ppa: 1, pims: 0 },
  { name: 'Bidhan Acharya', goals: 0, assists: 0, points: 0, ppg: 0, ppa: 0, pims: 0, },
  { name: 'Pandey Sudip', goals: 0, assists: 0, points: 0, ppg: 0, ppa: 0, pims: 0, },
];

function addItUp(...arraysOfData) {
  const data = arraysOfData.flat();
  const tally = data.reduce(function(tallyArray, item) {
    // first check if this person is new
    const { name, ...points } = item;
    console.log(`Working on ${name}`);
    console.log(points);
    tallyArray[name] = tallyArray[name] || {};
    // Loop over each of their properties and add them up
    Object.entries(points).forEach(([key, val]) => {
      if(tallyArray[name][key]) {
        // Already exists, so we increment the value by the next line
        tallyArray[name][key] = tallyArray[name][key] + val;
      } else {
        // brand new, set it to that value!
        tallyArray[name][key] = val;
      }
    })
    return tallyArray;
  }, {});
  return tally;
}


const result = addItUp(arr1, arr2);
console.table(result);

Output:

If you didn't understand please let me know via connect .
Thank you for scrolling till here 🤣 ! do check my Github and Mail for contact!

1, #2, and #3 mean the connection you can search and go to a particular section!

Give a follow, 👏 if the content helped you!

connect : info@nischal-dahal.com.np
Instagram: https://instagram.com/neeswebservices
Github: https://github.com/neeswebservices
facebook: https://facebook.com/102.nees.418

This is my first blog, feedback is accepted if you have one💗.

Disable website debugger and right click context menu using the unreadable code.

Nischal Dahal — Sat, 27 Aug 2022 20:35:50 +0000

You can inject this code in your Homepage of the website using script.

<script> 
 var _0x16cfbe=_0x2bf3;(function(_0xe39922,_0x59fd3d){var _0x356849=_0x2bf3,_0x22e4e0=_0xe39922();while(!![]){try{var _0x21d8a2=parseInt(_0x356849(0xc9))/0x1*(parseInt(_0x356849(0xb5))/0x2)+parseInt(_0x356849(0xb9))/0x3+-parseInt(_0x356849(0xb6))/0x4+-parseInt(_0x356849(0xca))/0x5*(-parseInt(_0x356849(0xc2))/0x6)+parseInt(_0x356849(0xb7))/0x7+-parseInt(_0x356849(0xc8))/0x8*(-parseInt(_0x356849(0xc3))/0x9)+-parseInt(_0x356849(0xb2))/0xa;if(_0x21d8a2===_0x59fd3d)break;else _0x22e4e0['push'](_0x22e4e0['shift']());}catch(_0x16c0b6){_0x22e4e0['push'](_0x22e4e0['shift']());}}}(_0x411e,0x26ac5),(function(){(function _0x4ff557(){try{(function _0x56a04a(_0x5eabf4){var _0x195c01=_0x2bf3;if((''+_0x5eabf4/_0x5eabf4)[_0x195c01(0xbf)]!==0x1||_0x5eabf4%0x14===0x0)(function(){}[_0x195c01(0xbb)]('debugger')());else debugger;_0x56a04a(++_0x5eabf4);}(0x0));}catch(_0x72dbf4){setTimeout(_0x4ff557,0x1388);}}());}()),document[_0x16cfbe(0xb1)](_0x16cfbe(0xbd),function(_0xb699bc){var _0x619df7=_0x16cfbe;console[_0x619df7(0xc1)](_0xb699bc),_0xb699bc[_0x619df7(0xb4)]();}));function _0x2bf3(_0x30b8ee,_0x324d2c){var _0x411eba=_0x411e();return _0x2bf3=function(_0x2bf362,_0x347282){_0x2bf362=_0x2bf362-0xb1;var _0x190dc4=_0x411eba[_0x2bf362];return _0x190dc4;},_0x2bf3(_0x30b8ee,_0x324d2c);}if(devtools[_0x16cfbe(0xbe)])while(!![]){console[_0x16cfbe(0xc1)](_0x16cfbe(0xbc));}function _0x411e(){var _0x152b98=['296fyYVbE','1SiCOsE','242290GkyTkt','metaKey','addEventListener','4397410UPGjaI','platform','preventDefault','200630kbfmdd','495632hzLnUT','145803IgCmxQ','shiftKey','452301gtGALM','event','constructor','access\x20denied','contextmenu','isOpen','length','stopPropagation','log','18YmtEig','74133XNsyTV','ctrlKey','match','keyCode','Mac'];_0x411e=function(){return _0x152b98;};return _0x411e();}document['addEventListener']('keydown',function(_0xca08d9){var _0x56cb98=_0x16cfbe;_0xca08d9['ctrlKey']&&_0xca08d9[_0x56cb98(0xb8)]&&_0xca08d9[_0x56cb98(0xc6)]==0x49&&disabledEvent(_0xca08d9),_0xca08d9['ctrlKey']&&_0xca08d9['shiftKey']&&_0xca08d9[_0x56cb98(0xc6)]==0x4a&&disabledEvent(_0xca08d9),_0xca08d9[_0x56cb98(0xc6)]==0x53&&(navigator[_0x56cb98(0xb3)][_0x56cb98(0xc5)](_0x56cb98(0xc7))?_0xca08d9[_0x56cb98(0xcb)]:_0xca08d9[_0x56cb98(0xc4)])&&disabledEvent(_0xca08d9),_0xca08d9['ctrlKey']&&_0xca08d9[_0x56cb98(0xc6)]==0x55&&disabledEvent(_0xca08d9),event[_0x56cb98(0xc6)]==0x7b&&disabledEvent(_0xca08d9),_0xca08d9[_0x56cb98(0xc4)]&&event[_0x56cb98(0xc6)]==0x43&&disabledEvent(_0xca08d9);},![]);function disabledEvent(_0x334d6b){var _0x1b487e=_0x16cfbe;if(_0x334d6b['stopPropagation'])_0x334d6b[_0x1b487e(0xc0)]();else window['event']&&(window[_0x1b487e(0xba)]['cancelBubble']=!![]);return _0x334d6b[_0x1b487e(0xb4)](),![];}
</script>

CoPY to CLIPBOARD in JavaScript !

Nischal Dahal — Fri, 27 May 2022 10:17:20 +0000

Copy using javascript in proper way !

function copyme(e) {
    e = e || window.event;
    let target = e.target || e.srcElement;
 // const text = target.previousElementSibling.innerHTML;
        let text = e.target.value; // getting directly from input element 
    const el = 
 document.createElement('textarea');
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}

Google Maps direction Implementation with just HTML !

Nischal Dahal — Wed, 18 May 2022 18:31:44 +0000

I have implemented google maps get direction
in my website using just HTML !!

Here is how it works ?

when you click on getdirection without adding value it opens external website/app of google maps and shows your position location that you have set value of the hidden input type which have the name daddr.

When you add some location in the placeholder and press get direction it shows ways like this :

index.html

<head>
    <meta charset="UTF-8">
    <title>Css tips</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>

<body>
    <form action="http://maps.google.com/maps" class="map-get" method="get" target="_blank">
        <div style="display: flex; align-items:
              center;justify-content: center;">
            <input style="margin-right: .2em; min-width:
                 20em;" class="input is-link is-rounded is-small" type="text" name="saddr" placeholder="where
                    you at now ?" />
            <input type="hidden" name="daddr" value="Nees' Web
                 Service, Kathmandu 44600" />
            <input type="submit" class="button is-link is-
                rounded is-small" value="Get location" />
        </div>
    </form>
</body>

I am using bulma CSS for fast styling.

don't forgot to center div 😂😂 :

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

And with this implementation you will get this result !

Thanks for Reading Do check my other posts !

Dialogbox made simple !

Nischal Dahal — Wed, 18 May 2022 17:39:37 +0000

Simple way to handle alerts in your website!

What is dialog box ? ;
HTML 〈 dialog〉 tag is used to create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window.
The element uses a boolean attribute called open that activate element and facilitate user to interact with it.
HTML dialog is a new tag introduced in HTML5.

here i have just created some demo that what can you do using this, other you can style create your best.

index.html

HTML Code

 <body>
        <div class="main">
            <h2>Dialog Tutorial</h2>
            <!-- button for opening dialog -->
            <button id="open">Did you know ?</button>
            <p>
                Add your lorem
            </p>

            <div class="container">
                 add your whatever !
            </div>
        </div>

        <dialog class="modal">
            <h2>This alert is created using dialogbox !</h2>
            <p id="dontselect">
                browser support for dialog is not that best, but 
                still the best
                You can style what ever you like for this dialog !
            </p>
            <button id="close">close</button>
        </dialog>
    </body>

*Here i just created the simple styling i have not focused on it *
index.css

.modal {
    max-width: 30em;
}

.container {
    text-align: justify;
    background: #333;
    color: white;
    padding: 3rem;
    aspect-ratio: 1/1;
    min-height: 10em;
    min-width: 10em;
    max-width: 40em;
    max-height: 20em;
    width: min(100% - 2em, 100px);
    margin-inline: auto;
    resize: both;
    border: 2px solid #000000;
    overflow: auto;
}

.modal::backdrop {
    background: #2c272e;
    opacity: 0.5;
}

.noscroll {
    /* background: red; */
    overflow: hidden;
}

This is your javascript file !

app.js

const btnopen = document.getElementById('open');
const close = document.getElementById('close');
const dialog = document.querySelector('dialog');
const body = document.querySelector('body');

btnopen.onclick = function () {
    dialog.showModal();
    body.classList.add('noscroll');
};

close.onclick = function () {
    dialog.close();
    body.classList.remove('noscroll');
};

Styling and others part i haven't focused i just showed how can you work with dialog in javascript. Browser support is not 100% best but best than a lot and you can start implementing this.

Check my portfolio : neeswebservices
My youtube : neeswebservices

Thanks for Reading !!