How to catch a json on an external server with Javascript?

Asked

Viewed 5,750 times

0

Hello guys I need to get a json with javascript on an external server! Someone knows how to do it?

javascript json

  • You mean the external server gives you a JSON as a response and you want to use that JSON in your javascript?

  • Is this what you’re looking for? http://jsfiddle.net/LFWn6/

  • 1

    That’s right, buddy! I’m racking my brain with this.

2 answers

2

What you need is to make an AJAX call...

Example

var endereco = 'http://echo.jsontest.com/key/value/one/two';
$.ajax({
    url: endereco,
    complete: function(res){
        var meuJSON = JSON.parse(res.responseText);
        console.log(meuJSON); 
    }
});

Live demo

An ajax request/call allows you to interact with the "server side". Thus, client-side code can fetch information from a server. The same, or an exterior when it allows.

What you also need to do is parse/convert the incoming data to a JSON object. Javascript has a native function for this, the JSON.parse()

In this example I used jQuery, it is also possible with other libraries or even pure javascript.

  • Sergio, this works if the call is on the same server as the requested url. But how to do when the url is on another server? For example, my website, where the call is made, is http://meusite.com.br. The url for execution of asynchronous would be http://othersrvidor.com.br. This, by default, returns an error, port that are called asynchronous on different servers. How to proceed, on both sides? Usage: development of API.

  • 1

    @Szag-Ot in that case you must have a CORS problem. If you have control over the other site you can activate CORS, if you cannot use JSONP, check here: http://answall.com/q/70267/129

-1

That’s what I was able to find ->

You can do it like this:

function insertReply(content) {
    document.getElementById('output').innerHTML = content;
}

// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'http://url.to.json?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);

But source should be aware that you want it to call the function passed as callback parameter for it.

With the Google API it would look like this:

function insertReply(content) {
    document.getElementById('output').innerHTML = content;
}

// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);

Check out how the data looks like when you go from callback to the Google API:

https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply

Here is very good explanation of JSONP: http://en.wikipedia.org/wiki/JSONP

translated response of: https://stackoverflow.com/questions/9922101/

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.