JS for random quote API

JS for random quote API
0

#1

So i just tried this javascript code out. Can anyone tell me where I am going wrong!?

'/**

  • Created by Ras on 3/24/2017.
    */
    $(document).ready(function($){
    $("#another").on(“click”,function(q){
    q.preventDefault();
    $.getJSON(“http://quotesondesign.com/wp-json/posts?filter” +
    "[orderby]=rand&filter[posts_per_page]=1",function(data) {
    var quote = data.shift();
    $(".quoteText").text(quote.content);
    $(".author").html(quote.title);
    $(".linkSpace").html(quote.link);
    });
    });
    });’

#2

It would help if you could create a pen at codepen.io with HTML you’re trying to manipulate.

Also, to post code here you have to surround it with triple backticks (`).

// some bad ass code here

#3

What you have here looks right, and checks out when I plug the request into Postman (if you’re not using it, it makes API work so much easier!). Is there maybe a problem with the HTML ID and classes you’re referencing? Did you perhaps forget to load jQuery into your Codepen?


#4

ahh see i thought it was just one single quote… //well you live and learn. I’ve been working on trying to use Webstorm but I will upload the code to codepen when I get to my comp.


#5

I just tried the code out in code pen and it looks like it is working fine, except I get one quote when I press the button and then the button stops working. I even tried adding a cache: false to the $.getJSON… do i need to switch to $.ajax for that to work??


#6

here is my codepen, keep in mind I haven’t stylized yet. This is just the backbone. http://codepen.io/sh1r00/pen/xqjdZw


#7

What I see right now is

  1. jQuery still needs to be loaded
  2. The URL seems to have lost a “?”, between “posts” and “filter.”

With these changed, it seems to work now. (Though you’ll want to get rid of the <p> in the body text–one easy way might be to use $.html() (http://api.jquery.com/html/) instead of $.text().)


#8

As an option for the handling of the quote, I just used $.append() inside of a div since it is being return with the p tag.

And thanks for posting this, it helped me get past my issue with using this API for the quotes.


#9

I’d like to start off by saying thank you very much for all your help, all of you. I have finally gotten it to work and I am now just styling it. On that note I seem to have a very weird problem. I’m using var quoteAnimate=$("#quoteText, #author, #linkSpace"); var animTime=500; quoteAnimate.fadeOut(animTime,function(c){ quoteAnimate.html(""); $("#quoteText").html(quote.content); $("#author").text("- " +quote.title); $("#linkSpace").html("source: " + quote.link); quoteAnimate.fadeIn(animTime) });

to fade the different ID’s in and out. However, this works well for the #author and #linkSpace but for the #quoteText I am being forced to use $("#quoteText").text(quote.content);. If i use $("#quoteText").html(quote.content); or $("#quoteText").append(quote.content); then the animation only occurs on the first click and then after that it reverts back to the normal method of random selection. This would have been OK if there was a way to remove the <p> and </p> from the generated quote while using .text but I just cant seem to figure it out. Any advice?


#10

Hi,

so I went ahead and started the WikiViewer while I waited for some feedback on the quote machine. Maybe I am trying to these intermediate apps to quickly and I am just having brain farts all over the place but I cant get the search to work for my WikiViewer.

Maybe someone with a fresh pair of eyes could find the problem here.

P.S. Don’t worry about the magnifying glass, I’m going to switch the search button to that once I figure out why it isn’t displaying the searches.


#11

The click in $.on() needs " ". See http://api.jquery.com/on/ – and, for that matter, https://api.jquery.com/click/ might be more straightforward. Also, I wound up using $.ajax instead of $.getJSON, but I forget whether that was because I had to. Also, look out for the “=” needed before searchTerm.

I’ve got to say the Wikipedia project was hard, because “the API” is more like a massive array of hundreds of APIs, documented in a labyrinth of data. But there is hope.

Free tip: for this project you wind up doing a ton of using your JS file to “inject” html code into the DOM. This means writing it all as a string. And yet you’ve also got to stick in references to variables, which means typing "...bla bla bla" + foo[i] + "bla ... a lot. A feature introduced in the 2015 update to javascript, template literals (aka “string literals” aka “template strings”) makes it so much more pleasant.