DEV Community: Marco Pestrin

How to subtract objects from an array of objects by id in Javascript

Marco Pestrin — Thu, 29 Sep 2022 18:19:47 +0000

Considering the case of wanting to add data to the database but without having duplicates.

Therefore we have two objects: one with my data in the database and the second with the data to add.

Respectively in the example called: records and mainArr.

As the title says, in this case we have to subtract the elements of the first (records) from the second (mainArr) array by id.

There are many algorithms that can be adopted, below is an example:

const records = [
  {
    id: 1,
    name: "example1"
  },
  {
    id: 2,
    name: "example2"
  },
  {
    id: 3,
    name: "example3"
  },
  {
    id: 4,
    name: "example4"
  },
];

const mainArr = [
  {
    id: 3,
    name: "example3"
  },
  {
    id: 4,
    name: "example4"
  },
  {
    id: 5,
    name: "example5"
  },
  {
    id: 6,
    name: "example6"
  },
];

const recordsById = records.reduce((ac, record) => {
  if (record.id) {
    return {
      ...ac,
      [record.id]: record
    }
  }
  return ac
}, {});

const objClean = mainArr.filter((item) => {
  const isDuplicated = recordsById[item.id];
  return !isDuplicated;
});

console.log(objClean);

We use reduce to conveniently obtain an array of objects with the identifier as key and the object itself as value.

We will then have a result similar to:

 recordsById: {
    1: { name: "example1", id: 1 },
    2: { name: "example2", id: 2 },
    3: { name: "example3", id: 3 },
    4: { name: "example4", id: 4 },
  }

Then through the filter method we can check if an element of my second array (mainArr) contains an element of the created mapping.

We will output my clean object (objClean).

Below is a more compact version of the same logic:

const recordsById = records.reduce((ac, record) => {
  return record.id ? { ...ac, [record.id]: record } : ac;
}, {});

const objClean = mainArr.filter(item => !recordsById[item.id]);

3 ways to use reduce in javascript

Marco Pestrin — Thu, 20 Jan 2022 15:51:31 +0000

Flat an array

let arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const flattened = arr.reduce((acc, item) => [...acc, ...item], []);
console.log(flattened);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

If you have a more complex array there is this other solution

arr = [
  [1, 2, 3],
  [4, ["a", [5]], 6],
  [7, 8, [9, 10]],
];
const flatten = (arr) => arr.reduce((acc, item) => {
  if (item instanceof Array) {
    return acc.concat(flatten(item))
  }
  acc.push(item);
  return acc;
}, []);
flatten(arr);

Sum all numbers

arr = [4, 5, 9, 18];
const total = arr.reduce((acc, number) => acc + number, 0);
console.log(total);
// 36

Change in an object with the number of occurrences

arr = ["Los Angeles", "London", "Amsterdam", "Singapore", "London", "Tokyo", "Singapore"];
const counter = arr.reduce((acc, city) => {
  acc[city] = acc[city] ? acc[city] + 1 : 1;
  return acc;
}, {});
console.log(counter);
/*
{
  "Los Angeles": 1,
  "London": 2,
  "Amsterdam": 1,
  "Singapore": 2,
  "Tokyo": 1
}
*/

Joi Validation in Javascript— How to translate the errors

Marco Pestrin — Wed, 03 Mar 2021 17:37:51 +0000

I found a good way to translate errors that return Joi validator. It was a little bit hard to understand by docs so I opened an issue on Github and I understand how to handle it looking the test that they are made.

As you can see in the documentation the validate function is carried out on the schema and accept payload as first parameter and options as second parameter.

errors can also be set among the options to be precise, there is the language key. You must specify in which language you want to receive it.
There are messages key as well. It accepts an object whose keys are the possible values that I will have in errors.language.

import { itErrors, enErrors } from './joiCustomErrors';

const options = {
    errors : {
        labels: false,
        language: localStorage.getItem('i18nextLng')
    },
    messages: {
        it: { ...itErrors },
        en: { ...enErrors }
    }
};

// in this case I get the language tag from a Localhost. 
// my two possible tags are just 'it' and 'en'

const res = mySchema.validate(payload, options);

Values of these keys will be a specific object, that:

keys is our tag error
value is the translate. That is the message that validate function will return to us. This is an example:

export const itErrors = {
    'string.empty': 'Non può essere vuoto',
    'number.base': 'Deve essere un numero',
    'any.invalid': 'Valore non valido',
    'domain.invalid': 'Dominio non valido',
    'email.invalid': 'Email non valida',
    'phoneNumber.invalid': 'Numero di telefono non valido',
    'array.unique': 'Valore duplicato',
    'custom.max11char': 'Massimo 11 caratteri alfanumerici. Iniziare con una lettera'
};

export const enErrors = {
    'string.empty': 'Cannot be empty',
    'number.base': 'Must be a number',
    'any.invalid': 'Value not valid',
    'domain.invalid': 'Domain not valid',
    'email.invalid': 'Email not valid',
    'phoneNumber.invalid': 'Phone Number not valid',
    'array.unique': 'contains a duplicate value',
    'custom.max11char': 'Maximum 11 alphanumeric characters. Start with a letter'
};

I can get the error tag directly from Joi. It’s the value of type in error.details of validate function result.

Joi puts some presets tags, as in the example you can see string.empty and number.base. Anyway I can create it when I handle the error.

For example when I execute the custom method, so I create a function with two input parameters. In that function I will return helpers.error that need to Joi to understand which error is it. And as parameter the tag we’ve want to associate with. The same tag that we’ll use to do a translate.

Check row 9 of this snippet:

import Joi from 'joi';
import parsePhoneNumber from 'libphonenumber-js';

const isValidPhoneNumber = (phoneNumber, helper) => {
    const res = parsePhoneNumber(phoneNumber, 'IT');
    if (res !== undefined && res.isValid()){
        return phoneNumber;
    }
    return helper.error('phoneNumber.invalid');
};

const voiceSchema = Joi.object({
    'text': Joi.string().required(),
    'voice': Joi.string().allow("")
});

export const phoneNumberSchema = Joi.string().custom(isValidPhoneNumber).required();
export const nameSchema = voiceSchema.required();
export const surnameSchema = voiceSchema.required();

export default Joi.object().keys({
    'name': nameSchema,
    'surname': surnameSchema,
    'phoneNumber':phoneNumberSchema
});

Through this pattern Joi will now return the error already translated based on what you have set.

See you next time.

Partial and complete validation of the form with Joi on React

Marco Pestrin — Sat, 27 Feb 2021 09:10:00 +0000

Recently I started using Joi to validate forms on my React application.

In this code snippet I’ll show you how to do a partial and a full validation
The partial one when I’m typing, while the full validation when I click on the submit button.

Below here the syntax of the schema:

import Joi from 'joi';
import parsePhoneNumber from 'libphonenumber-js';

export default Joi.object().keys({
    'name': Joi.object({
        'text': Joi.string().required(),
        'voice': Joi.string().allow("")
    }).required(),
    'surname': Joi.object({
        'text': Joi.string().required(),
        'voice': Joi.string().allow("")
    }).required(),
    'phoneNumber': Joi.string().custom((phoneNumber, helper) => {
        const res = parsePhoneNumber(phoneNumber, 'IT');
        if (res !=== undefined && res.isValid()){
            return phoneNumber;
        }
        return helper.error('phoneNumber.invalid');
    }).required()
});

Now I necessarily split the schema into more parts because I had to export different models from the file.
To make it more readable, the code becomes like this:

import Joi from 'joi';
import parsePhoneNumber from 'libphonenumber-js';

const isValidPhoneNumber = (phoneNumber, helper) => {
    const res = parsePhoneNumber(phoneNumber, 'IT');
    if (res !== undefined && res.isValid()){
        return phoneNumber;
    }
    return helper.error('phoneNumber.invalid');
};

const voiceSchema = Joi.object({
    'text': Joi.string().required(),
    'voice': Joi.string().allow("")
});

export const phoneNumberSchema = Joi.string().custom(isValidPhoneNumber).required();
export const nameSchema = voiceSchema.required();
export const surnameSchema = voiceSchema.required();

export default Joi.object().keys({
    'name': nameSchema,
    'surname': surnameSchema,
    'phoneNumber':phoneNumberSchema
});

In the frontend it will look like this:

import React, { useState } from 'react';
import schema, { phoneNumberSchema, nameSchema, surnameSchema } from './schema2';

export const MyComponent = () => {

    const [ errors, setErrors ] = useState([]);

    function validationField(schema, value, field) {
        const err = JSON.parse(JSON.stringify(errors));
        const res = schema.validate(value);
        let errorsList = {};
        if (res.error) {
            res.error.details.forEach((error) => {
                errorsList[field] = error.message;
            });
            setErrors({
                ...errors,
                ...errorsList
            });
        } else {
            delete err[field];
            setErrors(err);
        }
    }

    function validationPaylod(payload) {
        const res = schema.validate(payload);
        if (res.error){
            // ko!
        } else {
            // ok!
        }
    }

    function handleChange(field, text, voice) {
        const payload = { 
            text,
            voice
        };
        switch (field) {
            case 'name':
                validationField(nameSchema, payload, 'name');
                break;
            case 'surname':
                validationField(surnameSchema, payload, 'surname');
                break;
            case 'phoneNumber':
                validationField(phoneNumberSchema, text, 'phoneNumber');
                break;
        }
    }

    return (<>{/* RENDER INSIDE HERE !!!! */}</>)
};

In this case the handleChange function (with the three required parameters) will be called at the onChange event of the form and at the end we will call the validationPayload function.

Into my Errors state I have an object with all errors divided for keys.

Enjoy mates!

Field validator with delay of Material UI input — ReactJS / Javascript

Marco Pestrin — Sat, 06 Feb 2021 09:27:21 +0000

The goal is to have a runtime validation of Material UI Component‘s input with a third part library (Validator).
In our example we will check the phone number with a little trick to handle a delay when we are typing.
We don’t want the errors to come out while we type!

import React, { useState } from 'react';
import isMobilePhone from 'validator/libs/isMobilePhone';
import { TextField } from '@material-ui/core';

export const MyForm = () => {
    const [ phoneNumber, setPhoneNumber ] = useState("");

    const validationPhoneNumber = async(phoneNumber) => {
        let res = false;
        if (phoneNumber !== "") {
            await new Promise((resolve) => setTimeout(resolve, 800));
            res = !isMobilePhone(phoneNumber);
            setErrorPhoneNumber(res)
        }
        return res
    }

    const handleSetPhoneNumber = (event) => {
        setPhoneNumber(event.target.value);
        validationPhoneNumber(event.target.value);
    }
    return (
        <TextField
            fullwidth
            variant="filled"
            label="Phone Number"
            value={phoneNumber}
            error={errorPhoneNumber}
            onChange={(event) => handleSetPhoneNumber}
        />
    )
}

validationPhoneNumber (row 8) is an asynchronous function to handle the delay to check the error. With this logic you have the time to digit and avoid the momentary errors.

First we need to init a variable as false with let because it will be rewritable (row 9). Then we check if our field isn’t empty because as initial state we don’t wanna any type of error (row 10).

In the next line of code we need to stop code execution and wait with a keyword await until the promise is resolved. It will be resolved when the first parameter of setTimeout will be done; in this case after 800 milliseconds. This is one of the many techniques for delaying code execution (row 11).

Then we execute the validation functions that we have imported from the external library and we will save in res if there is an error or not, which is the opposite of the function result (row 12).

In the next line of code we will save in the component state if the error is present. This state will be the error props of TextField component (row 13 and row 28).

How to swap 2 variables in javascript

Marco Pestrin — Tue, 12 Jan 2021 17:57:14 +0000

Normally to swap two variables you need a temporary variable because when the first variable is reassigned you lose the value.

let a = 'apple';
let b = 'orange';

let tmp = a;
a = b;
b = temp;

We have the syntax available to perform a swap without need an intermediate variable.

let a = 'apple';
let b = 'orange';

[a, b] = [b, a];

console.log(a); // orange
console.log(b); // apple

Javascript destructuring enable variable swapping without need an intermediate variable.

Cheers mates!

How to get the common values of an indefinite number of arrays in Javascript

Marco Pestrin — Thu, 24 Dec 2020 11:43:53 +0000

Some days ago I needed to write an algorithm in javascript to get the common values of an indefinite number of arrays.

Let’s look at the following case:

const listArray = [
["ivr", "web", "wap", "add", "acd"],
["ivr", "wap", "add", "web"],
["ivr", "web", "add"]
]

Desired result:

["ivr", "web", "add"]

In this case the common values are ivr, add and web meanwhile the others were excluded because they were not present in all arrays.

Seen my case, I’m not aware how many element an array can have and also how many arrays can I have. But the once thing that I aware was the possible data within the array.

I fully leaned on this last and only piece of information I had available to avoid too many cycles.

The solution that I used to get this algorithm is:

const listArray = [
["ivr", "web", "wap", "add", "acd"],
["web", "add"],
["ivr", "wap", "add", "web"],
["ivr", "web", "add"]
];

let commonChannels = ["ivr", "wap", "web", "acd", "add"];

listArray.forEach(item => {
commonChannels = commonChannels.filter(ch => item.indexOf(ch) > -1);
})

I have created an array with all possible values (commonChannels).

I started to cycle all arrays then every within item each
Whenever an element was missing it was excluded from the array. To do this I rewrote the base variable (commonChannels)

To exclude the elements I've combined of the Filter and IndexOf methods.

Typeof array is an object in javascript

Marco Pestrin — Tue, 08 Dec 2020 08:38:41 +0000

Often there is a need to compare variable types in javascript

const arr = [2,4,6,8]
const obj = { type: ‘serviceBot’, valid: true }
console.log(typeof arr)
console.log(typeof obj)

The result is

object
object

Apparently there seems to be something wrong because the array is recognized as an object and seems to be no real difference between object and array.
This because in javascript all derived data type is always a type object. Included functions and array.
In case you need to check if it’s an array you can use isArray method of Array.

const arr = [2,4,6,8]
const obj = { type: ‘serviceBot’, valid: true }
console.log(Array.isArray(arr))
console.log(Array.isArray(obj))

The result is

true
false

otherwise there is a instanceOf operator

const arr = [2,4,6,8]
const obj = { type: ‘serviceBot’, valid: true }
console.log(arr instanceOf Array)
console.log(obj instanceOf Array)

and the result will be the same as the previous one.

How to compare two arrays in javascript?

Marco Pestrin — Tue, 01 Dec 2020 08:03:15 +0000

Some days ago I needed to compare two arrays in Javascript and I trivially tried to compare them as if they were strings

const serviceList = ["sales_bot"]
const botType = ["sales_bot"]
console.log(serviceList == botType)

and the result was this:

false

It is possible to compare arrays using the "every" method in javascript. A possible solution is

botType.length === serviceList.length && serviceList.every(item => botType.indexOf(item) > -1)

I started with length arrays comparison, to be sure to have the same items. Then, I needed to check if the items were inside the same number of times.

It is essential that the first condition is satisfied at first, since it is less elaborate than the second one. Indeed, the second condition has to cycle every element of the array.

If the first returns FALSE, then the second one won't even be executed. Therefore we are sure that the arrays will be different because they have different numbers of elements.

If the first returns TRUE, is to check even the second condition. This means to check that all the elements of arrays are actually the same

How is this comparison done?

The every method returns true just if all elements satisfy the condition and the indexOf method return the index of element. If doesn’t exist the result is -1. For this reason the condition is > -1

In this case, I knew for sure that one of my array would have never been empty, otherwise the problem would have been somewhere else. It happens other times that this thing is not obvious and then you need one more check like the following:

botType.length === serviceList.length && serviceList.length > 0 && serviceList.every(item => botType.indexOf(item) > -1)

Enjoy your code mates!