How can I get jQuery .get to return JSON data?

Question

I am trying to fetch information using AJAX from a URL. This URL will return a JSON response but I am having a great deal of trouble getting this to work. I am fairly new to using both AJAX and JSON so I am not quite sure as to what I am doing wrong. I am not receiving any output. Here's what I have so far:

HTML:

<!doctype html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content - Type">
    <meta content ="utf-8" http-equiv="encoding">

    <title>My Javascript Practice</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <noscript>JavaScript Must Be Enabled</noscript>
</head>
<body>
    <div id="pub">Parent Div</div>

    <script type="text/javascript" src="getList.js"></script>
</body>
</html>

JavaScript:

var teamId = 883455;
var myUrl = "https://apps-internal.attributor.com/guardianapi/service/csadminservice/csteams/" + teamId + "?view=PUBLISHERS_FOR_TEAM";

$.get(myUrl, function(data){
    $("#pub").html(data);
    alert("load was performed");
});

I it really JSON? So why are you trying to put it inside a div? JSON is not HTML. Also, is apps-internal.attributor.com your own domain? And is your current page being accessed through https too? — bfavaretto, Jun 19 '13 at 23:59
I really hope all the data returned via that api is demo or non-sensitive... else it is completely open returning all the lists of teams, publishers and members... :( Please ensure that production data is not revealed on a public site like this. — bPratik, Jun 20 '13 at 00:02
as Musa said it requires CORS setup or it should return script instead of json. SAME ORIGIN POLICY — Gokul Kav, Jun 20 '13 at 00:32

isJustMe · Accepted Answer · 2013-06-20T00:01:53.247

3

May I suggest to use something like this:

$.ajax({
  type: 'GET',
  url: myURL,
  data: yourDAta,
  dataType: 'jsonp',
  success: function(jsonData) {
    alert(jsonData);
  },
  error: function() {
    alert('Error loading ');
  }
});

Note the usage of jsonp over json

edited Jun 20 '13 at 00:01

answered Jun 19 '13 at 23:53

isJustMe

5,452
2
31
47

ikhsan · Answer 2 · 2013-06-20T00:51:40.617

just add json as the third parameter, the data passed to the callback will be an object representation of the received json string

this should work,

var teamId = 883455;
var myUrl = "https://apps-internal.attributor.com/guardianapi/service/csadminservice/csteams/" + teamId + "?view=PUBLISHERS_FOR_TEAM";

$.get(myUrl, function(data){
    //data here will be object, should not used directly
    $("#pub").html(data);
    alert("load was performed"); 
}, 'json');

if you are on different domain, you could setup a server side script to grab that data, say it is php file called api.php

<?php
    $teamId = $_GET['teamId'];

    //php.ini should allow url fopen
    $response = file_get_contents("https://apps-internal.attributor.com/guardianapi/service/csadminservice/csteams/". $teamId ."?view=PUBLISHERS_FOR_TEAM");
    echo $response;
?>

and call it in your js file

var teamId = 883455;
var myUrl = "path/to/api.php?teamId="+teamId;

$.get(myUrl, function(data){
    //data here will be object, should not used directly
   console.log(data);
}, 'json');

if he is in the same domain, i think it should work, as stated in jquery docs [jQuery.get()](http://api.jquery.com/jQuery.get/) — ikhsan, Jun 20 '13 at 00:23
If it doesn't work without specifying a data type I don't see how it will work if you specify one. — Musa, Jun 20 '13 at 00:26

score 0 · Answer 3 · edited May 23 '17 at 12:05

Try using the getJSON() method instead if you're only interesting in getting back a JSON response.

The .get, .load, .getJSON are all just extensions that use the .ajax method underneath, if you can't get the extension method working it sometimes helps to just use straight .ajax()

Essentially the getJSON() method is just this:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

Note the explicit use of the dataType: "json".

Since this looks like a cross-domain call you will need to use something like jsonp (JSON with padding) or CORS (Cross-origin resource sharing) if your endpoint supports it. If jsonp is supported by your endpoint you can set the dataType: "jsonp" but it needs to be explicitly supported by the server see this post for more details on jsonp.

Note: your server API must support jsonp or CORS for this to work.

How can I get jQuery .get to return JSON data?

3 Answers3

Linked