Why my json data wont appear in browser when i run the code

Question

My json data won't appear in browser. It's my first time using json and I can't figure out the problem.I searched on internet and it was related with mime but still can't figure it out. This is the code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var jsonData = '[{"rank":"9","content":"Alon","UID":"5"},{"rank":"6","content":"Tala","UID":"6"}]';
$.ajax({
    url: '/echo/json/',
    type: 'POST',
     contentType:"application/json; charset=utf-8",
    data: {
        json: jsonData
    },
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr><td>' + item.rank + '</td><td>' + item.content + '</td><td>' + item.UID + '</td></tr>';
        });
        $('#records_table').append(trHTML);
    }
});
</script>
</head>
<body>
<table id="records_table" border='1'>
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>
</table>
</body>
</html>

score 0 · Answer 1 · answered Jun 06 '15 at 19:44

Here is the updated code

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var jsonData = '[{"rank":"9","content":"Alon","UID":"5"},{"rank":"6","content":"Tala","UID":"6"}]';
$(document).ready(function(){
$.ajax({
    url: '/echo/json/',
    type: 'POST',
     contentType:"application/json; charset=utf-8",
    data: {
        json: jsonData
    },
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr><td>' + item.rank + '</td><td>' + item.content + '</td><td>' + item.UID + '</td></tr>';
        });
        $('#records_table').append(trHTML);
    }
});


});
</script>
</head>
<body>
<table id="records_table" border='1'>
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>
</table>
</body>
</html>

You were missing the document ready block around your ajax call.

I just tried again and it doesn't work. It shows only the table header. — oorip, Jun 06 '15 at 19:47
I have checked. There seems to be some problem with your response. Is the response an object. Just try doing an alert or console.log - It seems that it is not an object. Also the jsonData that you have written is a string and not a json array. I hope it is by design. — Nikhil Aggarwal, Jun 06 '15 at 19:53
If it is not an array object and is a string, you can do JSON.parse(response) and then pass it to the $.each function — Nikhil Aggarwal, Jun 06 '15 at 19:54

SIDDU HUSSAIN · Answer 2 · 2015-06-06T19:55:13.787

0

Write a Error method and see if some ajax error has occured

`$.ajax({
   success: function(){
     // Handle the success event
   },
   error: function(xhr){
     // Handle the error event
   }
   // ......
 });`

The xhr will have response text

UPDATE:

your code is perfectly fine as nikhil said dodument.ready should do the magic

check the fiddle i have tested with your code http://jsfiddle.net/8sfm0p14/

edited Jun 06 '15 at 19:55

answered Jun 06 '15 at 19:48

SIDDU HUSSAIN

47
6

are you getting "XMLHttpRequest cannot load file:///C:/echo/json/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." in the console log – SIDDU HUSSAIN Jun 06 '15 at 20:02
no it just shows the header of the table, doest give any error – oorip Jun 06 '15 at 20:04
The line url: '/echo/json/', is the culprit ..... it only works in jsfiddle ..... – SIDDU HUSSAIN Jun 06 '15 at 20:12
aha..so what am i supposed to do now? – oorip Jun 06 '15 at 20:16
If you are trying to learn how ajax works.... you are good with basic things excep you post URL. – SIDDU HUSSAIN Jun 06 '15 at 20:25
If you are trying to learn how ajax works.... you are good with basic things except you post URL. ..... You always need to post to some URL and get response from that URL in simple if you want to do this in your machine .......set up some code in PHP and host it and try ........ In mean while let me see if i come across some thing – SIDDU HUSSAIN Jun 06 '15 at 20:31
Please check the below referance http://stackoverflow.com/questions/28032904/jquery-ajax-post-data-to-local-file http://stackoverflow.com/questions/17947971/ajax-in-jquery-does-not-work-from-local-file – SIDDU HUSSAIN Jun 06 '15 at 20:35

Why my json data wont appear in browser when i run the code

2 Answers2