Categories
JavaScript Answers

How to get object property name as a string with JavaScript?

Sometimes, we want to get object property name as a string with JavaScript.

In this article, we’ll look at how to get object property name as a string with JavaScript.

How to get object property name as a string with JavaScript?

To get object property name as a string with JavaScript, we call the Object.keys method.

For instance, we write

const person = { firstName: "John", lastName: "Smith", age: "30" };
const listPropertyNames = Object.keys(person);

to call Object.keys with the person to return an array of non-inherited string property keys.

Therefore, listPropertyNames is ['firstName', 'lastName', 'age'].

Conclusion

To get object property name as a string with JavaScript, we call the Object.keys method.

Categories
JavaScript Answers

How to list all cookies for the current page with JavaScript?

Sometimes, we want to list all cookies for the current page with JavaScript.

In this article, we’ll look at how to list all cookies for the current page with JavaScript.

How to list all cookies for the current page with JavaScript?

To list all cookies for the current page with JavaScript, we can get them from the document.cookies string.

For instance, we write

const cookiesObj = document.cookie.split(";").reduce((cookies, cookie) => {
  const [name, value] = cookie.split("=").map((c) => c.trim());
  cookies[name] = value;
  return cookies;
}, {});

to call document.cookies.split to split the string by the semicolon and return the array of cookie strings.

Then we call reduce with a callback that splits each string by the '=' string and then call map with a callback to trim the start and end of the strings.

We then get the name and value from the returned array.

Next, we add the name property to cookies and set it to value.

And then we return cookies.

The final cookies object returned by reduce is assigned to cookiesObj.

Conclusion

To list all cookies for the current page with JavaScript, we can get them from the document.cookies string.

Categories
JavaScript Answers

How to fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser?

Sometimes, we want to fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser.

In this article, we’ll look at how to fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser.

How to fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser?

To fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser, we can set the script element’s type attribute to module.

For instance, we write

calc.js

const sum = (a, b) => {
  return a + b;
};

export { sum };

to create the calc.js module.

Then we write

<script type="module">
  import { sum } from "./calc.js";

  console.log(sum(2, 3));
</script>

to import the sum function we exported from calc.js in the script tag.

We set the type attribute to module to let the browser know that we can import and export values in the script element.

Conclusion

To fix Uncaught SyntaxError: Unexpected token import error when importing JavaScript modules in the browser, we can set the script element’s type attribute to module.

Categories
Angular Answers

How to disable button in Angular?

Sometimes, we want to disable button in Angular.

In this article, we’ll look at how to disable button in Angular.

How to disable button in Angular?

To disable button in Angular, we set the [disabled] attribute.

For instance, we write

<button [disabled]="!editmode ? 'disabled' : null" (click)="loadChart()">
  <div class="btn-primary">Load Chart</div>
</button>

to set the [disabled] attribute to 'disabled' if editmode is false.

Otherwise, we set it to null to keep the button enabled.

Conclusion

To disable button in Angular, we set the [disabled] attribute.

Categories
JavaScript Answers

How to get the beginning and end of the day with moment and JavaScript?

Sometimes, we want to get the beginning and end of the day with moment and JavaScript.

In this article, we’ll look at how to get the beginning and end of the day with moment and JavaScript.

How to get the beginning and end of the day with moment and JavaScript?

To get the beginning and end of the day with moment and JavaScript, we can use the startOf and endOf methods.

For instance, we write

const now = moment();
console.log("start", now.startOf("day").toString());
console.log("end", now.endOf("day").toString());

to create a moment object with the current date time with moment().

Then we call now.startOf with 'day' to return a moment object with the start of the current day.

We call now.endOf with 'day' to return a moment object with the start of the current day.

Conclusion

To get the beginning and end of the day with moment and JavaScript, we can use the startOf and endOf methods.