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](http://stackoverflow.com/a/7638786/1430708) — iii, Mar 06 '14 at 18:58

score 1 · Answer 1 · answered Mar 06 '14 at 18:56

1

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 06 '14 at 18:56

Anoop Joshi P

25,373
8
32
53

could you please explain what does json do. – Nagaraju Apr 21 '17 at 11:04

nikis · Accepted Answer · 2014-03-06T19:42:19.227

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 06 '14 at 19:42

answered Mar 06 '14 at 19:18

nikis

11,166
2
35
45

Will this work? Or will I still have the issue with the cross domain requesting? Is there any easy work around for that? – Spencer Mar 06 '14 at 21:37
That works perfectly! What would be the easiest way to clean up the JSON output? And can you show me what I did wrong? – Spencer Mar 06 '14 at 22:23
@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`? – nikis Mar 07 '14 at 08:25
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? – Spencer Mar 07 '14 at 15:37
@Spencer well, it's on your own how you'll parse it. – nikis Mar 07 '14 at 15:41

jQuery / JSON unable to call an API

2 Answers2