Borislav Hadzhiev
Tue Oct 19 2021·2 min read
Photo by Jeffrey Wing
The "$.getJSON is not a function" jQuery error occurs for multiple reasons:
To solve the "$.getJSON is not a function" jQuery error, make sure to load the
full version of the jQuery library. The slim version of the library excludes
some functions like getJSON
. The library should only be loaded once on the
page, otherwise the error is thrown.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div> <p>Hello</p> </div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ Load your JS file ✅ --> <script src="index.js"></script> </body> </html>
We loaded the full version of the jQuery library before loading our script (the
index.js
file in the example).
Here's the content for the index.js
file.
$(document).ready(function () { $.getJSON('https://randomuser.me/api/', function (response) { console.log(response); }); });
After the DOM is ready, we use the getJSON
function to make an API request and
log the output to the console.
If you open the console in your browser, you'll see the response.
If you're still getting the error, make sure you're loading the regular jQuery version (not the slim one) and you're loading the library only once.
When loading the jQuery library from a file on your local files system, make sure that the path you specify is correct and points to the right file.
Specifying an incorrect path to the jQuery script is equivalent to not loading the script at all.