Using JavaScript to call and display JSON data from a URL

Question

This is my html code to fetch data from the link which contains json data. But it is not working so can anyone tell me why?

 <html>
 <head>
 <script src="http://code.jquery.com/jquery-1.10.1.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("#btnjson").click(function(){
 $.getJSON("http://waitrapp.co/bipin/practice.php",function(result){
 $("#ID").append(result.ID);
 $("#Item_Name").append(result.Item_Name);
 $("#Item_Price").append(result.Item_Price);
  });
 });
 });
 </script>
 </head>
 <body>

 <button id="btnjson">Load!!!</button>
 <p id="ID">ID: </p>
 <p id="Item_Name">Item Name: </p>
 <p id="Item_Price">Item Price: </p>
 </body>
 </html>

Define "not working". Look at your browser's developer tools. Look at the JavaScript console. Does it report any errors? Look at the Net tab. Is the request being made? Does it get a response? Do they contain the data you expect? — Quentin, Oct 13 '14 at 15:02

score 1 · Answer 1 · edited May 23 '17 at 11:50

The HTTP response of http://waitrapp.co/bipin/practice.php does not contain proper CORS headers, if you set this in the php file it should work:

header("Access-Control-Allow-Origin: *");

This may be too simplified, so take a look at this SO post: https://stackoverflow.com/a/9866124/441907

Also as Salec pointed out you JSON is invalid, you are missing enclosing brackets [] and commas between the elements:

[
    {
        "ID": "10",
        "Item_Name": "Pizza",
        "Item_Price": "2.99",
        "Date_Created": "2014-10-01 08:27:41"
    },
    {
        "ID": "11",
        "Item_Name": "Burrito",
        "Item_Price": "2.99",
        "Date_Created": "2014-10-01 09:13:03"
    },
    {
        "ID": "12",
        "Item_Name": "Burger",
        "Item_Price": "4.99",
        "Date_Created": "2014-10-06 19:56:01"
    },
    {
        "ID": "13",
        "Item_Name": "Steak",
        "Item_Price": "10.99",
        "Date_Created": "2014-10-06 19:56:17"
    }
]

JSONP is a hack to get around the same origin policy from before the CORS specification was written. Why should the hack be preferred to the (more flexible) standard? — Quentin, Oct 13 '14 at 15:04
@Quentin You're right, as long as legacy browsers don't have to be supported. — Nick Russler, Oct 13 '14 at 15:14

score 0 · Answer 2 · answered Oct 13 '14 at 15:06

0

Your Json doesn´t look to be ok.

Try to check it first: http://jsonformatter.curiousconcept.com/

You need to create an array of Objects

answered Oct 13 '14 at 15:06

Salec

19
5

Using JavaScript to call and display JSON data from a URL

2 Answers2