Get data from external link of JSON by jQuery

Question

I am trying to read data from a JSON data by jQuery. Bus for some reasons it deosnt work.

Here is my JSON file: https://mersadesign.com/myPlayList.json and this is my code to get data:

$.getJSON("https://mersadesign.com/myPlayList.json", function(data){

  $.each(data.PlayListArray, function(key, val){
     alert(val.URL);
  });
});

Here is the demo:http://jsfiddle.net/SVk77/

Any idea to fix it?

it is a same origin policy violation - the external resource need to support either jsonp or CORS — Arun P Johny
– Arun P Johny, Commented Jun 25, 2014 at 3:07
see your browser console XMLHttpRequest cannot load https://mersadesign.com/myPlayList.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. — Arun P Johny
– Arun P Johny, Commented Jun 25, 2014 at 3:08
@ArunPJohny So how can I make it working? some websites like fb provide data by JSON. I can get data from those servers with no problem. — Daniel JJ
– Daniel JJ, Commented Jun 25, 2014 at 3:10
that is what I pointed out in the first comment.. the resource you are trying to access must support CORS/jsonp — Arun P Johny
– Arun P Johny, Commented Jun 25, 2014 at 3:13

Mohd Maaz · Accepted Answer · 2018-09-27 11:23:24Z

2

you can create web service for getting all music urls

PHP code:

<?php
    header('content-type: application/json; charset=utf-8');
    header("access-control-allow-origin: *");

$array = array("https://soundcloud.com/danial-sabagh/mane", "https://soundcloud.com/ajamband/gole-iran", "https://soundcloud.com/bibakofficial/kooch", "https://soundcloud.com/bibakofficial/mohammad-bibak-in-niz-bogzarad","https://soundcloud.com/kaishakhay/whine-and-kotch-j-chapri-f","https://soundcloud.com/amirtataloo/merci","https://soundcloud.com/amirtataloo/bikhiyal");// you can also apply your business logic and get url from database

echo json_encode(array("PlayListArray"=>$array));
    return;
?>

JQuery code for calling & getting response from php web service

Javascript code:

$.ajax({
      url: 'getMusicURL.php',
      type: "GET",
      dataType:'json',
      success:function(data){

    console.log(data);//using object data you access all music array 

             for(var i=0;i<data.PlayListArray.length;i++){
          console.log(data.PlayListArray[i]);
     }
}
});

edited Sep 27, 2018 at 11:23

Mohd Maaz

2785 silver badges20 bronze badges

answered Jun 25, 2014 at 4:03

Mehul Dudhat

4311 gold badge7 silver badges20 bronze badges

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

1 Comment

Mehul Dudhat Over a year ago

at the top of php file add header('content-type: application/json; charset=utf-8'); header("access-control-allow-origin: *"); this 2 line is allow to all url for accessing web service

cracker · Accepted Answer · 2014-06-25 05:07:02Z

1

You can achieve using Cross-Origin XMLHttpRequest

I.e

$(document).ready(function(){        
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://mersadesign.com/myPlayList.json", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {        
        // JSON.parse does not evaluate the attacker's scripts.
        var resp = JSON.parse(xhr.responseText);
      }
    }
    xhr.send();    
});

It Seems that your server who is returning the json is not supporting the request.

Demo

answered Jun 25, 2014 at 5:07

cracker

4,9043 gold badges26 silver badges41 bronze badges

Collectives™ on Stack Overflow

Get data from external link of JSON by jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related