Can't load a JSON from the URL

Question

I am trying to load the JSON and alert it but I am not able to do this simple thing. I am confused have done this before but now it doesn't work. A simple fiddle would be helpful, this is how I tried it:

$.getJSON("https://www.mariyano.com/app-server/test/?action=get_list", function(json) {
alert("JSON Data: " + json.data.id);
});

I am getting the error...

XMLHttpRequest cannot load https://www.mariyano.com/app-server/test/?action=get_list. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

for this I tried using a callback:

$.getJSON("https://www.mariyano.com/app-server/test/?action=get_list&callback=?",function(json) {
 alert("JSON Data: " + json.data.id);
     });

and it threw up two errors:

Resource interpreted as Script but transferred with MIME type text/html: "https://www.mariyano.com/app-server/test/?action=get_list&callback=jQuery18205437749766279012_1353579335783&_=1353579335798". jquery-1.8.2.js:8304

Uncaught SyntaxError: Unexpected token :

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

You can't access data on another domain without circumventing the same-origin policy.

You can't use JSONP to do that unless the service you are accessing supports JSONP, which https://www.mariyano.com/app-server/test/ doesn't.

edited May 23 '17 at 11:43

Community

1
1

answered Nov 22 '12 at 10:26

Quentin

914,110
126
1,211
1,335

1

You would need to use serverside script to request the code, then use your jquery to request that local script. – chris Nov 22 '12 at 10:29
What ss script are you using? PHP? – chris Nov 22 '12 at 10:30
Hmm without access to the serverside you really are stuck :( – chris Nov 22 '12 at 10:35
1

@KKSuhail — There are several workarounds listed in the answers to the question I linked to in this answer. – Quentin Nov 22 '12 at 10:35
@Quentin thanks !! http://jsfiddle.net/YHPxs/8/ i found a way .... but how can i get just the first element – Tabraiz Ali Nov 22 '12 at 10:54

score 1 · Answer 2 · answered Nov 22 '12 at 10:32

I think one thing you should understand is the format of your JSON object. From the look of it, it looks like this:

{
  "data": [
    {"id":"83","name":"asdas"},
    {"id":"86","name":"KKKK123"},
    {"id":"85","name":"KKKK123"},
    {"id":"82","name":"as"},
    ...],

  "status":1,

  "error":""
 }

You have 3 fields in your JSON object one called data, one called status, and one called error. Let's focus on the data field. It seems to be a giant array with objects at each index, each object containing fields including id and name.

Looking back at your code, you are trying to print json.data.id. The json.data is fine but when you say id... well it doesn't know which id it should be looking at so that's why it throws a syntax error.

the field data is an array so if you wanted to access a specific id you'd have to do

json.data[0].id and that'd give you the first index's id.

This at least explains the Uncaught SyntaxError: Unexpected token :.

i tried that in this fiddle[link]http://jsfiddle.net/YHPxs/2/ but still the same error is there — Tabraiz Ali, Nov 22 '12 at 10:37
I'm trying to play around with it but I'm not entirely sure why it is throwing a syntax error. You might need to [jQuery.parseJSON](http://api.jquery.com/jQuery.parseJSON/) the `responseText` on the website before interacting with it but that requires ajax I believe. If you don't have access to the server, that might be hard. I would suggest finding a workaround for the first error before tackling the syntax error. Nevertheless though, your `data` field is an array so it's important to treat it like one :) — aug, Nov 22 '12 at 10:53

score -2 · Answer 3 · answered Nov 22 '12 at 10:20

Follow this code it may help you

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="images">

</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });</script>

</body>
</html>

I can't see how it is supposed to help at all. It is a mass of code for accessing a completely different webservice. — Quentin, Nov 22 '12 at 10:24

Can't load a JSON from the URL

3 Answers3