56

I've got this piece of code:

$(document).ready(function () {
    $.getJSON('http://localhost:5000/', function (response) {
        console.log(response);
    });
});

localhost:5000 is a flask/python script that returns a json like:

{
  "data": [
    0, 
    0, 
    0,

And I'm getting:

$.getJSON is not a function TypeError: $.getJSON is not a function

Any tips where I can start untangling the whoolball?

Thanks!

Edit:

HTML:

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="lib/main.js"></script>
</head>

<body>
</body>

</html>

lib/main.js is where the document.ready is located.

Thanks!

Improve this question
4
  • 1
    What scripts are loaded on your page? You're either not including jQuery or you've called jQuery.noConflict() at some point before this (which means that you have to use jQuery instead of $ from that point on.
    – Adam Jenkins
    Commented Nov 15, 2016 at 1:06
  • If he didn't load jQuery he would get an error on the $(document) already ($ not found or something)... so it might be the noConflict...
    – patrick
    Commented Nov 15, 2016 at 1:16
  • your html haven't detect your jquery library
    – Beginner
    Commented Nov 15, 2016 at 1:52
  • @GabrielA.Zorrilla Please look at my recommendation in the answer below.
    – Aruna
    Commented Nov 15, 2016 at 2:06

6 Answers 6

Reset to default
173

You seem to be using slim version of jquery which does not have the method getJSON thats why you are getting this error.

Please use the full version of jquery instead from the below link.

https://code.jquery.com/jquery-3.1.1.min.js

Slim version of jquery excludes ajax, animations effects etc

Improve this answer
1
  • I use the most current version and i still get the error. And when i check if JQuery is even active at that point using window.jQuery, i get an true. So JQuery is loaded but the error is still gone. I use this snippet: <script src="code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    – Grimclaw Draven
    Commented May 12, 2022 at 8:23
3

Thus happens commonly when migrating codebases from jQuery v1.x+ to v3.0+ as jQuery updated/deprecated/discontinued some of it's API.

I recommend using jQuery Migrate which will address this, along with other issues:

Get it here via CDN:

https://cdnjs.com/libraries/jquery-migrate

If using Gulp/Grunt, you can import into your project using

npm install --save jquery jquery-migrate

Github Repository - https://github.com/jquery/jquery-migrate

Read more about jQuery v3.0+.. http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

Improve this answer
1
  • 5
    True. When I went from jQuery v1.x+ to v3.0+, encountered many deprecated calls: $.getJSON( ...snip... ).success() is now .done(), .error() is now .fail(), and .complete() is now .always()
    – Pierre
    Commented Jan 30, 2019 at 18:43
1 
function cinta(){
$.getJSON('http://localhost:5000/', function (response) {
        console.log(response);
    });
}
cinta();
$(document).ready(function () {
  console.log('yesss');  
});

This work for me in python flask

Improve this answer
1

I had the same error with my piece of code,

$.getJson("/foo.json")

The issue was that my function is actually spelled

$.getJSON

NOT $.getJson.

Improve this answer
1

Please use the full version of jquery CDN instead Slim/lite version.

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

without cross-origin and integrity, I hope it will work

Improve this answer
0

You can also use Fetch with async and await:

async function getData(){
  const response = await fetch( "http://localhost:5000/"
);
  return response.json();
}


getData().then((data) => {
//... your code
})

Live demo

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.