How to get jSon data from a url in html
Question
I am trying to get json data from: https://www.topurbanaradio.com/ps/scast.php
I've tried to use several codes that work for others and I can't get any information from the url.
The last code I tried was this one:
$(function() { var entries = []; var JSONurl = "https://www.topurbanaradio.com/ps/scast.php"; $.getJSON(JSONurl, function(data) { $.each(data.entries, function(i, f) { var tblRow = "<tr>" + "<td>" + f.cancion + "</td>" + "<td>" + f.artista + "</td>" + "<td>" + f.almbumart + "</td>" + "</tr>" $(tblRow).appendTo("#entrydata tbody"); }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <body> <div class="wrapper"> <div class="profile"> <table id="entrydata" border="1"> <thead> <th>Artista</th> <th>Cancion</th> <th>AlbumArt</th> </thead> <tbody> </tbody> </table> </div> </div> </body>
4 answers
solution1
0 2019-09-11 19:40:38
Add tr inside tbody the for your table and do a $each for object.value you receiving from the api . then append the result to tr i recommend also a loader the time the result show up.
Open that with CORS extension
NOTE : i am using firefox + CORS
$(function() { var entries = []; var JSONurl = "https://www.topurbanaradio.com/ps/scast.php"; $.getJSON(JSONurl, function(data) { $.each(Object.values(data), function(i, value) { console.log(value) var tblRow = "<td>" + value + "</td>" $(tblRow).appendTo("#entrydata tbody tr"); }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <body> <div class="wrapper"> <div class="profile"> <table id="entrydata" border="1"> <thead> <th>Artista</th> <th>Cancion</th> <th>AlbumArt</th> </thead> <tbody> <tr></tr> </tbody> </table> </div> </div> </body>
solution2
0 2019-09-11 19:51:21
I think your issue with CORS
because when I tried to run it from localhost or direct from HTML file, I got CORS error.
if you have access to this endpoint you need to allow CORS for your domain OR install CORS extension in your browser just for testing purpose.
solution3
0 2019-09-11 19:51:25
Put simply, there are many problems here and this will not work in production.
First, cross domain AJAX requests aren't allowed by browsers.
Second, the server isn't returning the right headers.
Running curl -L -IX GET https://www.topurbanaradio.com/ps/scast.php returns the following headers which includes a content type of Content-Type: text/html; charset=UTF-8 Content-Type: text/html; charset=UTF-8 (HTML) vs Content-Type: application/json; charset=UTF-8 Content-Type: application/json; charset=UTF-8 (JSON).
HTTP/1.1 200 OK
Date: Wed, 11 Sep 2019 19:35:39 GMT
Server: Apache
Upgrade: h2
Connection: Upgrade
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
Is this code running on www.topurbanaradio.com ? If not, you will hit cross-domain (CORS) errors as the server behind www.topurbanaradio.com is not sending the right Access-Control-Allow-Origin , Access-Control-Allow-Methods and Access-Control-Allow-Headers headers.
If they intended on serving cross-domain requests, they would send the Access-Control-Allow-Origin: * header.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
$.getJSON("https://www.topurbanaradio.com/ps/scast.php", function(data) {
console.log(data);
});
});
</script>
</head>
<body>
</body>
</html>
Check the console.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.topurbanaradio.com/ps/scast.php . (Reason: CORS header 'Access-Control-Allow-Origin' missing).
solution4
0 2019-09-11 20:25:07
You can't do a XHR to another domain unless that document explicitly contains the CORS headers allowing it (this is to block scripts from stealing sensitive data).
To get data from an external document that does not have CORS headers, there is JSONP , which can be included as aa <script> tag in your page. This requires that the other site can be updated to support this. This can be dangerous, as it allows the other site to insert a script to do anything on your page - only do this if you trust the other site.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.