Category: JavaScript Answers

Sometimes, we may run into the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.

In this article, we’ll look at how to fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.

Fix the jQuery UI Autocomplete ‘this.source is not a function’ Error

To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.

For instance, we write:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="tags">

to add the CSS link tag and script tags for the jQuery and jQuery UI libraries.

Then we add an input with the input tag.

Next, we turn the input into an autocomplete input with:

const fakedata = ['test1', 'test2', 'test3', 'test4', 'ietsanders'];
$("#tags").autocomplete({
  source: fakedata
});

We call autocomplete with the source property set to fakeData to add the autocomplete entries and show them when we type in something that matches one or more of the fakedata entries.

Conclusion

To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.

Sometimes, we may run into the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app.

In this article, we’ll look at how to fix the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app.

Fix the ESLint ‘error no-undef for document’ Error

To fix the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app, we can add:

"browser": true

into the env section of the ESLint config file.

To do this, we write:

{  
  "env": {  
    "browser": true,  
    "node": true  
  }  
}

And we add "document": false into the globals section with:

{  
  "globals": {  
    "document": false  
  }  
}

This way, ESLint will assume that the app runs in the browser environment and so the document object will be available.

And so ESLint won’t emit the error.

We can also do the same thing from the CLI.

To set browser to true , we run:

eslint --env browser,node file.js

And to include document in globals , we run:

eslint --global document file.js

Conclusion

To fix the ESLint ‘error no-undef for document’ error when we’re developing our JavaScript app, we can add:

"browser": true

into the env section of the ESLint config file.

Sometimes, we want to splice a JavaScript array in half regardless of the size.

In this article, we’ll look at how to splice a JavaScript array in half regardless of the size.

Splice a JavaScript Array in Half Regardless of the Size

To splice a JavaScript array in half regardless of the size, we can use the slice method with the index of the middle element.

For instance, we can write:

const arr = [1, 2, 3, 4, 5, 6]
const halfwayThrough = Math.floor(arr.length / 2)
const arrayFirstHalf = arr.slice(0, halfwayThrough);
const arraySecondHalf = arr.slice(halfwayThrough, arr.length);

console.log(arrayFirstHalf, arraySecondHalf)

We have the arr array that we want to split in 2.

To do this, we get the index of the middle element with:

const halfwayThrough = Math.floor(arr.length / 2)

We take the floor of the length divided by 2 with Math.floor .

Then we get the first half with:

const arrayFirstHalf = arr.slice(0, halfwayThrough);

that returns the first 3 elements of arr with slice .

slice takes the first index of the element and 1 after the index of the last element we want to include with the returned array respectively.

Then we get the 2nd half with:

const arraySecondHalf = arr.slice(halfwayThrough, arr.length);

Therefore, arrayFirstHalf is:

[1, 2, 3]

And arraySecondHalf is:

[4, 5, 6]

Conclusion

To splice a JavaScript array in half regardless of the size, we can use the slice method with the index of the middle element.

Sometimes, we want to sort an object by value in JavaScript.

In this article, we’ll look at how to sort an object by value in JavaScript.

Sort an Object by Value in JavaScript

To sort an object by value in JavaScript, we can use the Object.values method to get the property values from the object in an array.

Then we can use the JavaScript sort method to sort the array values.

For instance, we can write:

const dict = {
  "x": 1,
  "y": 6,
  "z": 9,
  "a": 5,
  "b": 7,
  "c": 11,
  "d": 17,
  "t": 3
};

const items = Object.values(dict).sort((first, second) => {
  return second - first;
});

console.log(items)

We create the dict object with values we want to sort.

Then we call Object.values with dict to return an array of dict property values.

Next, we call sort with a callback that returns how we want to sort the items.

We subtract second by first to sort the property values in descending order.

Therefore, the console log logs:

[17, 11, 9, 7, 6, 5, 3, 1]

Conclusion

To sort an object by value in JavaScript, we can use the Object.values method to get the property values from the object in an array.

Then we can use the JavaScript sort method to sort the array values.

Sometimes, we may want to run code when the DOM is loaded without using jQuery.

Therefore, we need to find an equivalent of jQuery’s $(document).ready in plain JavaScript.

In this article, we’ll look at how to find the equivalent of jQuery’s $(document).ready in plain JavaScript.

Equivalent of jQuery’s $(document).ready in Plain JavaScript

To find the equivalent of jQuery’s $(document).ready in plain JavaScript, we can listen to the DOMContentLoaded event on the document object with the addEventListener method.

To do this, we write:

document.addEventListener("DOMContentLoaded", (event) => {  
  console.log('document ready')  
});

to listen to the DOMContentLoaded event on document .

We call document.addEventListener with an event handler callback as the 2nd argument that runs when the DOM is successfully loaded.

Therefore, when the page is loaded, we should see 'document ready' logged.

Conclusion

To find the equivalent of jQuery’s $(document).ready in plain JavaScript, we can listen to the DOMContentLoaded event on the document object with the addEventListener method.