Random quote machine - Importing raw data

JavaScript
1

Hi campers, I seem to be having trouble with the communication between my HTML file and my JavaScript file. I’m trying to append raw data from an API to a div in my HTML and it is not working. I have tried using the jQuery on in a script tag within the HTML and it works! What could be going on?
Heres the codepen

Heres the HTML

<!Doctype html>

<html lang="en">
    <head>
        <!--Meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!--Bootstrap and CSS-->
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <!--Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

        <title>Random Quotes Generator</title>

        <!--Font Awesome-->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">


        <!--Javascript-->
        <script src="scripts.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
    </head>

    <body id="body">
        
        <div class="container d-flex justify-content-center align-items-center w-50">
       
            <div class="wrapper">
                
                <div class="row header d-flex justify-content-center p-3">
                    <h2 class="">Quotes</h2>
                </div>
                
                <div class="quote-bg p-3 rounded">
                    <div>
                        <div class="quote-box p-3">data goes here</div>

                        <div class="author d-flex justify-content-end p-2">
                            
                        </div>
                    </div>
                    <div class="row buttons p-3">
                        <div class="col-md-6">
                            <i class="fab fa-twitter fa-2x"></i>
                        </div>
                        <div class="col-md-6 d-flex justify-content-end">
                            <button type="button" class="btn btn-primary" id="random">Random</button>
                        </div>
                            
                    </div>

                </div>

                <div class="footer d-flex justify-content-center p-3">
                    <p>by <a href="https://www.freecodecamp.org/erickmurage">murage</a> for <a href="https://www.freecodecamp.org/">FCC</a></p>
                </div>
            </div>

        </div>
   

    </body>
</html>

Heres the JavaScript

$(document).ready(function() {
    $("#random").on("click", function() {
        $.getJSON("http://quotes.stormconsultancy.co.uk/random.json", function(json) {
           $(".quote-box").html(JSON.stringify(json)); 
        });
    });
});
2

I tired copying and pasting your code into CodePen and replaced the API endpoint with one that I know to be working—and I’m getting the raw response parsed as text to the div as intended.

Is your project hosted on CodePen? If so, and if I remember correctly, only HTTPS endpoints would work on CodePen now. I have also tried the HTTPS version of your endpoint on CodePen but it doesn’t work because CORS doesn’t seem to be enabled (see the console after you’ve clicked on the button).

Could you please add a bit more detail about what is not working and what steps have you taken to troubleshoot/reproduce the problem?

3

Thanks for the reply. I’ve not hosted my code on CodePen. I have tried pasting my code there but it is also not working. Like I said before, I tried using the jQuery in a script tag within the HTML, and it worked. However, I want to have separate files. To troubleshoot my current setup, I have checked that the script src links are correct. I have also tried using different API endpoints but none worked. I know that the jQuery is correct, because I used it in one of those w3school text editors and it worked. I also passed my html into an html validator and there were no errors. I don’t suppose css would have anything to do with it, so I really don’t know whats happening. I have also tried different browsers.

4

I agree that there isn’t anything wrong with your code and it only seems to be an issue with the API endpoint. As I mentioned before, I simply copy and pasted your code into a Pen and I could get things parsing into the div using an endpoint that I know is working for me.

I think it would be easier to see what the problem is if you just leave a link to your Pen here. Otherwise, you can try using the endpoint that I use for my quote machine (https://api.myjson.com/bins/of3ut)—if you replace that with your endpoint and click on the Random button, you will see a stringified JSON response (as you have coded it so).

1 Like
5

You were right, the end point you used works with my code. I’ve added the CodePen link to the initial question. I guess I’ll keep trying different endpoints. Also, why do you suppose it works on CodePen but not when I’m using my text editor and browser?

6

Ah, apologies for not having comment on this earlier, I was too focused on the endpoint an. d: I think this issue is because of the order of the script imports:

<!--Javascript-->
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The browser will always fetch scripts according to the order they appear in the document unless the async (and I think also defer?) attribute is used. As such, the code in scripts.js would run before the jQuery library has even loaded, and the functionalities that are dependent on jQuery wouldn’t work. To confirm, you should see something like this in the console:

ReferenceError: $ is not defined

Simply switching the order of the scripts should solve the problem in this case. It is worth noting that CodePen seems to load scripts in the HTML panel in some sort of async manner!

I hope that helps! :smile:

7

I also just found that out by mistake, i was about to tell you. Imagine that, nearly an entire day lost. At least I learnt something. Thanks a bunch.

1 Like
8

Perfectly understandable and It happens! I do that all the time when trying out new things; working through things by yourself is great (and you usually learn a lot from it), but knowing when to stop and ask for help is also very important.

Anyhow! I’m glad that it’s working now, good luck with the rest of the project! :smile:

1 Like