jQuery and its .getJSON not working and also how to synchronise the asynchronus .getJSON?

Question

so first of all, Yeah i know there are several answers out there, but none was able to solve my problem. first i will show my code HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shop</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/a565674a9d.js"></script>


    <!--MINE-------------------------------->
    <script src="JS/jquery.js"></script>
    <script src="JS/catalog.js"></script>

</head>
<body>
<nav class="navbar navbar-light">
    <div>
    <a class="navbar-brand" style="text-align: center;position: fixed; left: 40%;" >
        <img src="979709898.png" width="70" height="70" class="d-inline-block align-top" alt="">
        Costumer Bay
    </a>
        <a id="cart" class=" navbar-brand btn btn-danger" style="position: fixed; left: 70%" >
            <i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
        </a>
    </div>
</nav>
<div id="lin1" class="container-fluid" style="padding: 20px;">

</div>
<div id="lin2" class="container-fluid" style="padding: 20px;">

</div>
</body>
</html>

the jquery.js is the uncompressed raw jquery source code

Data.Json is in the JS folder

data.json:

[
    {
        "id":0,
        "name":"Laptop",
        "price":50000 ,
        "quantity":0
    },
    {
        "id":1,
        "name":"Phone",
        "price":30000 ,
        "quantity":0
    },
    {
        "id":2,
        "name":"Desktop",
        "price":70000 ,
        "quantity":0
    },
    {
        "id":3,
        "name":"Headphone",
        "price":9000 ,
        "quantity":0
    },
    {
        "id":4,
        "name":"Tablet",
        "price":35000 ,
        "quantity":0
    },
    {
        "id":5,
        "name":"AntiVirus",
        "price":5000 ,
        "quantity":0
    }
]

Now finally the javascript that is not working

catalog.js

let productinfo=[];
let firsttime = true;

$(function () {
console.log("here");
    refreshcatalog();
    console.log("now where");
    let cart = $('#cart');
    cart.click(function () {          //NOT!WORKING
        loadcart();
    })

});

function refreshcatalog() {
    console.log("no where");
    if (firsttime){
        console.log('evenhere');
        $.getJSON("JS/data.json",function (data) {
            console.log(data);                         //NOT!WORKING
        });
    }
    if(firsttime){
    firsttime=!firsttime;}
}
function loadcart() {
    console.log("will load cart");
}

NOT EVEN CLICK EVENT IS RUNNING. please guide me , NO I dont know AJAX, so please dont use ajax method to solve.

Please help

<----Edit1------>

for all those asking for directory structure:
shopping-----
             |_  catalog.html

             |_  JS(folder) -----
                                 |_  catalog.js
                                 |_  jquery.js
                                 |_  data.json

<---------------------EDIT 2 -__----------->

Click event started running after changing format to :

$(document).on('click','#button2', function()
{
    alert("Dynamic button action");
});

A reason why old my old ".click" was not working, will be greatly appreciated .Btw i am using Firefox Developers Edition.

no errors coming, everything is getting printed except the one i marked as not working @Barmar — Lohitaksh Trehan, Jun 30 '17 at 23:51
no not even that bracket is having any effect working @Barmar — Lohitaksh Trehan, Jun 30 '17 at 23:53
You're loading two versions of jQuery: `https://code.jquery.com/jquery-3.1.1.slim.min.js` and `JS/jquery.js`. That could be the problem. — Barmar, Jun 30 '17 at 23:55
Keep the one from bootstrap, remove the one from your server. — Barmar, Jul 01 '17 at 00:17
Either that or you need to use `$.noConflict()`, which gets complicated. — Barmar, Jul 01 '17 at 00:17
when i remove the jquery.js file from the folder it says that , .getJSON function is not defined, i dont think it is a problem of 2 scripts running, can you please try the code on your machine, may be that will help @Barmar — Lohitaksh Trehan, Jul 01 '17 at 00:21
Try removing the slim version and putting your version at that place, not the end. — Barmar, Jul 01 '17 at 00:27
Then try loading the full version of jQuery 3.1.1 instead of the slim version. — Barmar, Jul 01 '17 at 00:29
I'm not sure why `$.getJSON` isn't defined with slim, that's not one of the functions that's supposed to be left out. — Barmar, Jul 01 '17 at 00:30
See https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery — Barmar, Jul 01 '17 at 00:30
i have loaded it from here https://code.jquery.com/jquery-3.2.1.js — Lohitaksh Trehan, Jul 01 '17 at 00:31
Compressed is irrelevant, the difference is slim versus normal. Slim version leaves out some functions. — Barmar, Jul 01 '17 at 00:33
I loaded your code, changed the `jquery-3.1.1.slim.min.js` line to that, and it seemed to work. — Barmar, Jul 01 '17 at 00:41

Shiladitya · Accepted Answer · 2017-07-01T04:13:32.160

0

Below code needs to be changed as your catalog.js & data.json resides in same folder.

$.getJSON("JS/data.json",function (data) 
    console.log(data);
});

Change the code to

$.getJSON("data.json",function (data) {
    console.log(data);
});

Please check and let me know whether you are able to console the data or not, then will solve the other issue.

Lets rearrange the scripts (ordering)

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

I have removed jquery slim, as bootstrap uses that rather I have copied your jquery to the top so that bootstrap can use it.

Here goes the edited part.

Please don't remove JS/data.json from $.getJSON.

Remove your jquery slim & JS/jquery. Try using the below CDN link or I have provided in the comments

It worked for me in my local.

edited Jul 01 '17 at 04:13

answered Jul 01 '17 at 02:02

Shiladitya

12,003
15
25
38

no, it is saying; data.json not found , see my edit 1. but now i do think that it should be only data.json not JS/data.json , because they are in same file. Good point. – Lohitaksh Trehan Jul 01 '17 at 03:11
https://ibb.co/bJWxnk here is what happens when i do only data.json not JS/data.json – Lohitaksh Trehan Jul 01 '17 at 03:19
removing bootstrap slim and placing my jquer.js at its place , doesnt give any error, and doesnt give any console . that are missing (as written in question) . also the error in pic sent you above because of changing JS/data.json presists. – Lohitaksh Trehan Jul 01 '17 at 03:27
– Shiladitya Jul 01 '17 at 04:16
Relative URLs are resolved from the location of the HTML page executing the JS, not the location of the JS script. So his URL for `data.json` is correct. – Barmar Jul 01 '17 at 19:37

jQuery and its .getJSON not working and also how to synchronise the asynchronus .getJSON?

1 Answers1