Author: John Au-Yeung

Sometimes, we want to get all keys of a deep object in JavaScript.

In this article, we’ll look at how to get all keys of a deep object in JavaScript.

How to get all keys of a deep object in JavaScript?

To get all keys of a deep object in JavaScript, we can recursive traverse the object to get the keys.

For instance, we write:

const obj = {
  foo: 'bar',
  count: '3',
  counter: {
    count: '3',
  },
  baz: {
    test: "qux",
    tester: {
      name: "Ross"
    }
  }
};

const objectDeepKeys = (obj, keys = []) => {
  for (const key of Object.keys(obj)) {
    keys.push(key)
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      objectDeepKeys(obj[key], keys)
    }
  }
  return keys
}

console.log(objectDeepKeys(obj))

to define the objectDeepKeys function that takes the obj object to traverse and the array of keys.

In the function, we loop through each key we get from Object.keys with a for-of loop.

And in the loop, we have keys.push(key) to append the key to keys.

If obj[key] is an object and it’s not null, we call objectDeepKeys to do the same thing in the next level.

As a result, we see ['foo', 'count', 'counter', 'count', 'baz', 'test', 'tester', 'name'] logged.

Conclusion

To get all keys of a deep object in JavaScript, we can recursive traverse the object to get the keys.

Sometimes, we want to get the selected values of a multiple select element on change with JavaScript.

In this article, we’ll look at how to get the selected values of a multiple select element on change with JavaScript.

How to get the selected values of a multiple select element on change with JavaScript?

To get the selected values of a multiple select element on change with JavaScript, we can get all the options from the selectedOptions property of the select element.

For instance, we write:

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="mango">Mango</option>
  <option value="grape">Grape</option>
  <option value="watermelon">watermelon</option>
</select>

to add a multi-select element.

Then we write:

const select = document.querySelector('select')
select.onchange = (e) => {
  const selectedVals = [...e.target.selectedOptions].map(o => o.value)
  console.log(selectedVals)
}

to select the select element with querySelector.

We then set the select.onchange property to a function that gets all the selected options.

To do this, we get all the selected options with e.target.selectedOptions.

And then we spread them into an array and call map with a callback that returns the value from each selected option.

Conclusion

To get the selected values of a multiple select element on change with JavaScript, we can get all the options from the selectedOptions property of the select element.

Sometimes, we want to add an array to two-dimensional array with JavaScript.

In this article, we’ll look at how to add an array to two-dimensional array with JavaScript.

How to add an array to two-dimensional array with JavaScript?

To add an array to two-dimensional array with JavaScript, we can use the array push method.

For instance, we write:

const arr = [
  [1, 2, 3],
  [4, 5, 6],
];

arr.push([7, 8, 9]);
console.log(arr)

to call arr.push to append a new array to arr.

Therefore, arr is:

[
  [
    1,
    2,
    3
  ],
  [
    4,
    5,
    6
  ],
  [
    7,
    8,
    9
  ]
]

Conclusion

To add an array to two-dimensional array with JavaScript, we can use the array push method.

Sometimes, we want to parse a date in YYYYmmdd format in JavaScript.

In this article, we’ll look at how to parse a date in YYYYmmdd format in JavaScript.

How to parse a date in YYYYmmdd format in JavaScript?

To parse a date in YYYYmmdd format in JavaScript, we can use some syring methods.

For instance, we write:

const parse = (str) => {
  const y = str.substr(0, 4)
  const m = str.substr(4, 2) - 1
  const d = str.substr(6, 2);
  const date = new Date(y, m, d);
  return (date.getFullYear() === +y && date.getMonth() === +m && date.getDate() === +d) ? date : 'invalid date';
}

console.log(parse('20220202'))

to define the parse function to parse the date string str.

We extract the year y, month m and date d with substr.

And we subtract 1 from m to get a 0-based month required by JavaScript’s Date constructor.

Next, we check if the year, month, and date are all valid with date.getFullYear() === +y && date.getMonth() === +m && date.getDate() === +d.

If that’s true, then we return the date.

Otherwise, we return 'invalid date'.

Conclusion

To parse a date in YYYYmmdd format in JavaScript, we can use some syring methods.

Sometimes, we want to check if a text area is empty in JavaScript.

In this article, we’ll look at how to check if a text area is empty in JavaScript.

How to check if a text area is empty in JavaScript?

To check if a text area is empty in JavaScript, we can check if e.target.value is falsy or not.

For instance, we write:

<textarea></textarea>

to add a text area.

Then we write:

const textarea = document.querySelector('textarea')
textarea.onchange = (e) => {
  if (!e.target.value) {
    console.log('empty')
  }
}

to select the text area with querySelector.

And we set textarea.onchange to a function that checks if e.target.value is falsy to check if it’s empty when we type into the text area.

Conclusion

To check if a text area is empty in JavaScript, we can check if e.target.value is falsy or not.