Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to split and modify a string in Node.js and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to split and modify a string in Node.js and JavaScript.

In this article, we’ll look at how to split and modify a string in Node.js and JavaScript.

How to split and modify a string in Node.js and JavaScript?

To split and modify a string in Node.js and JavaScript, we use the split and map methods.

For instance, we write

const str = "123, 124, 234,252";
const arr = str.split(",").map((val) => Number(val) + 1);
console.log(arr);

to call str.split to split the string into a string array by the comma.

Then we call map with a callback to map each value to the value we want.

Conclusion

To split and modify a string in Node.js and JavaScript, we use the split and map methods.

Categories
JavaScript Answers

How to toggle display: none style with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to toggle display: none style with JavaScript.

In this article, we’ll look at how to toggle display: none style with JavaScript.

How to toggle display: none style with JavaScript?

To toggle display: none style with JavaScript, we set the style.display property.

For instance, we write

const yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === "none" ? "" : "none";

to select the element to modify with getElementById.

Then we set its style.display property to '' is it’s currently 'none'.

Otherwise, we set it to 'none'.

Conclusion

To toggle display: none style with JavaScript, we set the style.display property.

Categories
HTML

How to add a HTML select drop-down with an input field?

Labrador retriever puppy walking on green grass

Sometimes, we want to add a HTML select drop-down with an input field.

In this article, we’ll look at how to add a HTML select drop-down with an input field.

How to add a HTML select drop-down with an input field?

To add a HTML select drop-down with an input field, we use the datalist element.

For instance, we write

<input type="text" name="city" list="cityname" />
<datalist id="cityname">
  <option value="Boston"></option>
  <option value="Cambridge"></option>
</datalist>

to add an input with the datalist element.

We set the list attribute of the input to the same value as the id attribute of the datalist element to show the datalist’s values under the input when we type in the input.

Conclusion

To add a HTML select drop-down with an input field, we use the datalist element.

Categories
JavaScript Answers

How to flatten an array of arrays of objects with JavaScript?

Labrador retriever puppy walking on green grass

To flatten an array of arrays of objects with JavaScript, we use the array flat method.

For instance, we write

const flattenedArr = [["object1"], ["object2"]].flat();

to return a flattened version of the nested array with flat.

Conclusion

To flatten an array of arrays of objects with JavaScript, we use the array flat method.

Categories
Angular Answers

How to load JSON from local file with http.get() in Angular and TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to load JSON from local file with http.get() in Angular and TypeScript.

In this article, we’ll look at how to load JSON from local file with http.get() in Angular and TypeScript.

How to load JSON from local file with http.get() in Angular and TypeScript?

To load JSON from local file with http.get() in Angular and TypeScript, we call get with the relative path to the JSON.

For instance, we write

//...
export class AppComponent {
  private URL = "./assets/navItems.json";
  //...

  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient
      .get(this.URL)
      .subscribe((navItems) => (this.navItems = navItems));
  }
}

to call httpClient.get with the URL to the JSON.

Then we call subscribe with a callback to get the navItems response and set it as the value of this.navItems.

Conclusion

To load JSON from local file with http.get() in Angular and TypeScript, we call get with the relative path to the JSON.