Category: JavaScript Answers

Categories
JavaScript Answers

How to read the html element lang attribute value with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to read the html element lang attribute value with JavaScript.

In this article, we’ll look at how to read the html element lang attribute value with JavaScript.

How to read the html element lang attribute value with JavaScript?

To read the html element lang attribute value with JavaScript, we can use the getElementsByTagName and getAttribute methods.

For instance, if we have:

<html lang='en'>

</html>

then we write:

const [html] = document.getElementsByTagName("html")
const lang = html.getAttribute("lang");
console.log(lang)

to call getElementsByTagName to get the html element object.

Then we call html.getAttribute with 'lang' to get the lang attribute value of the html element.

Therefore, lang is 'en'.

Conclusion

To read the html element lang attribute value with JavaScript, we can use the getElementsByTagName and getAttribute methods.

Categories
JavaScript Answers

How to recursively remove null values from JavaScript object?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to recursively remove null values from JavaScript object.

In this article, we’ll look at how to recursively remove null values from JavaScript object.

How to recursively remove null values from JavaScript object?

To recursively remove null values from JavaScript object, we can traverse all the properties of all nested objects and entries of all arrays and remove all null values.

For instance, we write:

const obj = {
  "store": {
    "book": [
      null,
      {
        "category": "fiction",
        "author": "Evelyn Waugh",
        "title": "Sword of Honour",
        "price": 12.99
      },
      null,
      {
        "category": "fiction",
        "author": "J. R. R. Tolkien",
        "title": "The Lord of the Rings",
      }
    ],
    "bicycle": {
      "color": "red",
      "price": null
    }
  }
}


const removeNulls = (obj) => {
  const isArray = Array.isArray(obj);
  for (const k of Object.keys(obj)) {
    if (obj[k] === null) {
      if (isArray) {
        obj.splice(k, 1)
      } else {
        delete obj[k];
      }
    } else if (typeof obj[k] === "object") {
      removeNulls(obj[k]);
    }
    if (isArray && obj.length === k) {
      removeNulls(obj);
    }
  }
  return obj;
}

const newObj = removeNulls(obj)
console.log(newObj)

We have the obj object with some null values.

Then we define the removeNulls function that takes the obj object.

We check if obj is an array.

And we loop through the keys with the for-of loop.

If obj[k] is null and obj is an array, we call splice to remove the entry.

Otherwise, we use the delete operator to remove the entry.

If obj[k] is an object, then we call removeNulls to traverse one level deeper into the object and do the same operations.

And if obj[k] is an array and obj.length is k, then we call removeNulls with obj to remove null entries.

As a result, newObj is:

{
  "store": {
    "book": [
      {
        "category": "fiction",
        "author": "Evelyn Waugh",
        "title": "Sword of Honour",
        "price": 12.99
      },
      {
        "category": "fiction",
        "author": "J. R. R. Tolkien",
        "title": "The Lord of the Rings"
      }
    ],
    "bicycle": {
      "color": "red"
    }
  }
}

Conclusion

To recursively remove null values from JavaScript object, we can traverse all the properties of all nested objects and entries of all arrays and remove all null values.

Categories
JavaScript Answers

How to get all input fields inside div with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to get all input fields inside div with JavaScript.

In this article, we’ll look at how to get all input fields inside div with JavaScript.

How to get all input fields inside div with JavaScript?

To get all input fields inside div with JavaScript, we select the container div with querySelector.

Then we select all the input elements inside with querySelectorAll.

For instance, we write:

<div>
  <input>
  <input>
  <input>
</div>

to add inputs inside the div.

Then we write:

const divElem = document.querySelector("div");
const inputElements = divElem.querySelectorAll("input, select, checkbox, textarea")
console.log(inputElements)

to select the div with querySelector.

And then we call divElement.querySelectorAll with a selector string that selects input, select, checkbox, and textarea elements.

Therefore, inputElements is a node list with the 3 inputs.

Conclusion

To get all input fields inside div with JavaScript, we select the container div with querySelector.

Then we select all the input elements inside with querySelectorAll.

Categories
JavaScript Answers

How to use array reduce with condition in JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to use array reduce with condition in JavaScript.

In this article, we’ll look at how to use array reduce with condition in JavaScript.

How to use array reduce with condition in JavaScript?

To use array reduce with condition in JavaScript, we can call filter before we call reduce.

For instance, write:

const records = [{
    value: 24,
    gender: "male"
  },
  {
    value: 42,
    gender: "female"
  },
  {
    value: 85,
    gender: "female"
  },
  {
    value: 12,
    gender: "female"
  },
  {
    value: 10,
    gender: "male"
  }
]

const sumMaleAge = records
  .filter(({
    gender
  }) => gender === 'male')
  .reduce((sum, record) => sum + record.value, 0)
console.log(sumMaleAge)

We call records.filter with a callback that returns an array with records entries that have the gender value set to 'male'.

Then we call reduce on the returned array with a callback that returns the sum of the of the value from the filtered records entries.

Therefore, sumMaleAge is 34 since we summed up the value property values from the records entries with gender set to 'male'.

Conclusion

To use array reduce with condition in JavaScript, we can call filter before we call reduce.

Categories
JavaScript Answers

How to check if string is valid CSS color with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to check if string is valid CSS color with JavaScript.

In this article, we’ll look at how to check if string is valid CSS color with JavaScript.

How to check if string is valid CSS color with JavaScript?

To check if string is valid CSS color with JavaScript, we can use the CSS.supports method.

For instance, we write:

const isRedValid = CSS.supports('color', 'red')
console.log(isRedValid)

const isRandomValid = CSS.supports('color', 'random')
console.log(isRandomValid)

to call CSS.supports with the CSS property and the value respectively.

We call it to check if 'red' is a valid CSS color property value with:

const isRedValid = CSS.supports('color', 'red')

Likewise, we call it to check if 'random' is a valid CSS color property value with:

const isRandomValid = CSS.supports('color', 'random')

Therefore, isRedValid is true and isRandomValid is false.

Conclusion

To check if string is valid CSS color with JavaScript, we can use the CSS.supports method.