Helpful JavaScript utility functions

Today, JavaScript is one of the most popular programming languages ​​in the world. It is used by many companies like Google, Facebook, Microsoft, etc. to build web applications. JavaScript is a very powerful language that can be used to build complex web applications. It is also a very flexible language that can be used to build simple web applications.

In this article, I will list some of the most useful JavaScript utility functions that I have used in my projects.

1. GetValuesByKey

Hàm này sẽ giúp bạn lấy các giá trị có cùng tên field trong một object, bao gồm các object con lồng nhau. Nó sẽ trả về một mảng các giá trị tìm được.

Source code 📃

GetValuesByKey.js

/**
 * Get all values of specific key in object
 * @param {object} obj A javascript object to get values
 * @param {string} key A key of object
 * @returns 
 */
function GetValuesByKey(obj, key) {
    let values = [];
    for (let i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            values = values.concat(GetValuesByKey(obj[i], key));
        } else if (i == key) {
            values.push(obj[i]);
        }
    }
    return values;
}

Chạy thử 🧑‍💻

Live Editor

function GetValuesByKey(obj, key) { let values = []; for (let i in obj) { if (!obj.hasOwnProperty(i)) continue; if (typeof obj[i] == 'object') { values = values.concat(GetValuesByKey(obj[i], key)); } else if (i == key) { values.push(obj[i]); } } return values; } const data = { "id": 1, "name": "Item 1", "link": "/item-1", "relatedItems": [ { "id": 2, "name": "Item 2", "link": "/item-2" }, { "id": 3, "name": "Item 3", "link": "/item-3" }, { "id": 4, "name": "Item 4", "link": "/item-4" } ] } var result = GetValuesByKey(data, "link"); render(JSON.stringify(result));

function GetValuesByKey(obj, key) {
    let values = [];
    for (let i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            values = values.concat(GetValuesByKey(obj[i], key));
        } else if (i == key) {
            values.push(obj[i]);
        }
    }
    return values;
}

const data = {
    "id": 1,
    "name": "Item 1",
    "link": "/item-1",
    "relatedItems": [
        {
            "id": 2,
            "name": "Item 2",
            "link": "/item-2"
        },
        {
            "id": 3,
            "name": "Item 3",
            "link": "/item-3"
        },
        {
            "id": 4,
            "name": "Item 4",
            "link": "/item-4"
        }
    ]
}

var result = GetValuesByKey(data, "link");
render(JSON.stringify(result));

Result

Loading...

2. Flatten object

2.1. Flatten object

Hàm này sẽ giúp bạn làm phẳng một object có các object con lồng nhau. Nó sẽ trả về một object mới với các key là key của các object con lồng nhau.

Source code 📃

FlattenObject.js

/**
 * Flattens an object to a single level object
 * @param {object} obj Object to flatten 
 * @returns An object with all keys and values flattened
 */
function FlattenObject(obj) {
    const flattened = {};

    Object.keys(obj).forEach((key) => {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            Object.assign(flattened, flattenObject(obj[key]));
        } else {
            flattened[key] = obj[key];
        }
    });

    return flattened;
}

Chạy thử 🧑‍💻

Live Editor

/** * Flattens an object to a single level object * @param {object} obj Object to flatten * @returns An object with all keys and values flattened */ function FlattenObject(obj) { const flattened = {}; Object.keys(obj).forEach((key) => { if (typeof obj[key] === 'object' && obj[key] !== null) { Object.assign(flattened, FlattenObject(obj[key])); } else { flattened[key] = obj[key]; } }); return flattened; } const data = { "word": "pho", "meanings": { "partOfSpeech": "noun", "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken." } } var result = FlattenObject(data, ""); render(JSON.stringify(result));

/**
 * Flattens an object to a single level object
 * @param {object} obj Object to flatten 
 * @returns An object with all keys and values flattened
 */
function FlattenObject(obj) {
  const flattened = {};

  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      Object.assign(flattened, FlattenObject(obj[key]));
    } else {
      flattened[key] = obj[key];
    }
  });

  return flattened;
}

const data = {
  "word": "pho",
  "meanings": {
    "partOfSpeech": "noun",
    "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken."
  }
}

var result = FlattenObject(data, "");
render(JSON.stringify(result));

Result

Loading...

2.2. Flatten object with key

Hàm này sẽ giúp bạn làm phẳng một object có các object con lồng nhau. Nó sẽ trả về một object mới với các key là key của các object con lồng nhau, nhưng có thêm key của object cha ở đầu key của object con.

Source code 📃

FlattenObjectWithKey.js

/**
 * Flattens a javascript object with the keys as the path
 * @param {object} obj A javascript object to flatten
 * @param {string} prefix A prefix to add to keys
 * @returns An object with all keys and values flattened
 */
function FlattenObjectWithKey(obj, prefix = '') {
    return Object.keys(obj).reduce((acc, k) => {
        const pre = prefix.length ? `${prefix}.` : '';
        if (typeof obj[k] === 'object' && obj[k] !== null && !Array.isArray(obj[k])) {
            Object.assign(acc, FlattenObjectWithKey(obj[k], pre + k));
        } else {
            acc[pre + k] = obj[k];
        }
        return acc;
    }, {});
}

Chạy thử 🧑‍💻

Live Editor

/** * Flattens a javascript object with the keys as the path * @param {object} obj A javascript object to flatten * @param {string} prefix A prefix to add to keys * @returns An object with all keys and values flattened */ function FlattenObjectWithKey(obj, prefix = '') { return Object.keys(obj).reduce((acc, k) => { const pre = prefix.length ? `${prefix}.` : ''; if (typeof obj[k] === 'object' && obj[k] !== null && !Array.isArray(obj[k])) { Object.assign(acc, FlattenObjectWithKey(obj[k], pre + k)); } else { acc[pre + k] = obj[k]; } return acc; }, {}); } const data = { "word": "pho", "meanings": { "partOfSpeech": "noun", "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken." } } var result = FlattenObjectWithKey(data, ""); render(JSON.stringify(result));

/**
 * Flattens a javascript object with the keys as the path
 * @param {object} obj A javascript object to flatten
 * @param {string} prefix A prefix to add to keys
 * @returns An object with all keys and values flattened
 */
function FlattenObjectWithKey(obj, prefix = '') {
  return Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? `${prefix}.` : '';
    if (typeof obj[k] === 'object' && obj[k] !== null && !Array.isArray(obj[k])) {
      Object.assign(acc, FlattenObjectWithKey(obj[k], pre + k));
    } else {
      acc[pre + k] = obj[k];
    }
    return acc;
  }, {});
}

const data = {
  "word": "pho",
  "meanings": {
    "partOfSpeech": "noun",
    "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken."
  }
}

var result = FlattenObjectWithKey(data, "");
render(JSON.stringify(result));

Result

Loading...