jQuery / JSON unable to call an API

Question

I'm attempting to utilise the web service at Glosbe.com/a-api using jQuery. Could anyone tell me why my code below isn't returning any results? I am looking to query the API at Glosbe with a word and have the definition of that word displayed below.

Thanks.

This is the jQuery I have:

$(document).ready(function(){

$('#term').focus(function(){
  var full = $("#poster").has("img").length ? true : false;
  if(full === false){
     $('#poster').empty();
  }
});

var getPoster = function(){

    var film = $('#term').val();

     if(film === ''){

        $('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

     } else {

        $('#poster').html("<h2 class='loading'>Your definition is on its way!</h2>");

        $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=hello&pretty=true" + film + "?callback=?", function(json) {
           if (json !== "Nothing found."){
                 $('#poster').html('<h2 class="loading">Well, gee whiz! We found you a definition, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
              } else {
                 $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=hello&pretty=true" + "?callback=?", function(json) {
                    console.log(json);
                    $('#poster').html('<h2 class="loading">Nothing found.</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
                 });
              }
         });

      }

    return false;
};

$('#search').click(getPoster);
$('#term').keyup(function(event){
   if(event.keyCode === 13){
       getPoster();
   }
});

});

And the HTML:

<!DOCTYPE html>
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="Matthew Hughes">
    <meta name="Dictionary" content="A dictionary web service">
    <title>Dictionary Web Application</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
    <!--jQuery, linked from a CDN-->
    <script src="dictionary.js"></script>
    <script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <link rel="stylesheet" href="style.css" />

</head>

<body>

    <div id="container">
        <header>
            <h1>Dictionary Application</h1>
        </header>
        <section id="fetch">
            <input type="text" placeholder="Enter a word..." id="term" />
            <button id="search">Define!</button>
        </section>
        <section id="poster">
        </section>
        <footer>
            <p>Created by Matthew Hughes</p>
        </footer>
    </div>

</body>

Thanks.

You are attempting a cross domain request. See this comment

iii
– iii

2014-03-06 18:58:16 +00:00
Commented Mar 6, 2014 at 18:58 — iii
– iii, Commented Mar 6, 2014 at 18:58

nikis · Accepted Answer · 2014-03-06 19:42:19Z

0

If you'll try to make a request, you'll get 400 Bad request error. Take a look on URL at your code:

http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=hello&pretty=true" + film + "?callback=?"

You've made a typo, and the correct URL should be

http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase="+ film + "&pretty=true&callback=?"

jQuery automatically detects "callback=?" and switching to JSONP format. This works fine for me. But please be aware that response has no posters field.

edited Mar 6, 2014 at 19:42

answered Mar 6, 2014 at 19:18

nikis

11.3k2 gold badges37 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Spencer Over a year ago

Will this work? Or will I still have the issue with the cross domain requesting? Is there any easy work around for that?

Spencer Over a year ago

That works perfectly! What would be the easiest way to clean up the JSON output? And can you show me what I did wrong?

nikis Over a year ago

@Spencer You've just made wrong concatenation, value of film variable was appended to the pretty=true. What do you mean by clean up the JSON output?

Spencer Over a year ago

That makes sense, thank you for the explanation. Currently the JSOn output I receive back from Glosbe is just a huge block of JSON? Is there any way to clean it up and make it more readable output?

nikis Over a year ago

@Spencer well, it's on your own how you'll parse it.

Anoop Joshi P · Accepted Answer · 2014-03-06 18:56:12Z

0

Because It is a cross domain call. Browser will block it because of same origin policy. If you are trying to make cross domain ajax, you should CORS in your ajax. Server should also enabled it. Another method for cross domain ajax is using jsonp.

answered Mar 6, 2014 at 18:56

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

1 Comment

Nagaraju Over a year ago

could you please explain what does json do.

Collectives™ on Stack Overflow

jQuery / JSON unable to call an API

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related