Random Quote Machine - so lost

JavaScript
1

Hi - I am tackling (or trying to tackle) this project but I feel like there’s a whole chunk of knowledge that I am missing. For example, I have no idea how AJAX works. Was this covered and I cannot recall (or find it!). No-one else seems to have this concern…am I the only one who is very lost? If that’s the case, I’ll start reading up W3schools et al to understand better but just wanted to see how other felt about this?

2

When you’re starting out, AJAX is hard. I know the FCC material just kind of brushes over it and acts like you know it now, but most of us really struggled with it.

Was this covered and I cannot recall (or find it!).

In the current FCC, there is a section called JSON APIs and Ajax. But they do kind of go over it quickly.

No-one else seems to have this concern…am I the only one who is very lost?

Not at all. I am an ex-programmer and when I got to that stuff, it confused the hell out of me. It really didn’t completely make sense until I started building servers on the back end and saw things from the other side. Even now I’m still figuring some stuff out.

Take a deep breath. Don’t be so hard on yourself.

I would suggest looking for some youtube videos to start getting a feel for things - I found them very useful. Especially, I found using postman to make my own requests helpful - see if there are any videos with that.

I also wrote a simple pen to show the different ways to get AJAX JSON. It just uses some dummy data out on the internet.

If you have any questions, just ask - that’s why we’re here. But the more specific the question, the better the answer will be.

3 Likes
3

here is a very small simple ajax call… mebbe seeing how it works will help you?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    $.ajaxSetup({ cache: false });
    var url = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=";
        $.getJSON(url, function(result){
         var author, content, textContent;
         author = result[0].title;
         content = result[0].content;  
           
        $("div").html(author + " - <br>" + content );
        });
    });
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>

the cache: false part makes sure you get a new result every time…

if you just want to see what is IN the result… mebbe change to something like…

 function(result){
            $.each(result, function(key, val){
                $("div").append( " key = " + key + "<br> value = " + val + " <br><br> ");
            };

.append is different than .html or .text

p.s. this json parser may help show stuff?
https://codepen.io/Xiija/pen/YadXyv?editors=0010
just change the Url part…

1 Like
4

Thanks @kevinSmith and @Xiija for the words of encouragement and advice. Gonna start digging in!

5

OK, I have a question. I am following along with this YouTube video but I am not getting the same results as him.

He is pulling a bunch of data from this file:
https://learnwebcode.github.io/json-example/animals-1.json

into console.log.

I think I copied exactly what he did:

JS file:

// alert("What in the world?") - just checks to see that JS file is linked to HTML page.

var ourRequest = new XMLHttpRequest();

ourRequest.open("GET","https://learnwebcode.github.io/json-example/animals-1.json");

ourRequest.onLoad = function(){
  console.log(ourRequest.responseText);
};

ourRequest.send();

HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AJAX and JSON</title>
    <script src="AJAX.js"> </script>
  </head>
  <body>
    <h1>Is this working?</h1>

  </body>
</html>

I am not getting any data pulled in and displayed on my console.log. Any ideas what I’m doing wrong?

7

Sorry - I found my mistake…deleting this entry for now. Might come back and post again later.