Can't reading Json data using jquery

Question

<!DOCTYPE html>
<html>
  <head>
  <title>test</title>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  </head>
  <body>
    <div id="div1">sqq</div>
    <div id="div2">dv2</div>

    <script>
    function getData(){
        $.ajax({
            type:"GET",
            url:"j.json",
            dataType:"json",
            success: function(jsondata){
                output(jsondata);               
            }
        });
    }

    function output(json){

        var Data = eval('(' + json + ')');
        var html = '';
        //alert(Data.length);
        for(var i=0;i<Data.length;i++){
            html += 'name' + Data[i].name + 'age' + Data[i].age;
        }

        document.getElementById('div1').innerHTML = html;
        document.getElementById('div2').innerHTML = Data[0].name;
    }

    setTimeout(getData, 3000);

    </script>             
  </body>
 </html>

Above is my code and json file content is:

    [{"name":"aaa","age":18},{"name":"bbb","age":19}]

I don't understand why this not working. I want to update the content of div1 using json data but nothing happened. Is it anything wrong when I tried to read the json data? I'm not familiar with dealing Json data, so please explain in detail. Thanks a lot.

What's not working? Do you have any errors in the console? What's that setTimeout() supposed to do? Wait for the ajax response? — brbcoding, Feb 25 '14 at 20:38
See: http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript Don't use eval() for decoding `JSON`. — noahnu, Feb 25 '14 at 20:39
Except for a few quirks, like using eval(), it looks fine! You have to tell us exactly what isn't working? You have set the dataType to JSON, so you should already have an object, and passing that to eval() would probably fail, but you did of course open the console and check for errors, as that what surely show up ? — adeneo, Feb 25 '14 at 20:42

score 3 · Accepted Answer · answered Feb 25 '14 at 20:42

3

You don't have to use 'eval'. You will already receive json object in 'jsondata' var.

function output(json){


        var html = '';

        for(var i=0;i<json.length;i++){
            html += 'name' + json[i].name + 'age' + json[i].age;
        }

        document.getElementById('div1').innerHTML = html;
        document.getElementById('div2').innerHTML = json[0].name;
    }

answered Feb 25 '14 at 20:42

longchiwen

822
6
11

This works. Thanks so much. But in which occasion shall I use eval to parse json string to object? – AustintheCleric Feb 25 '14 at 20:45
You are telling jquery, that you expect json result by setting dataType=json. If you don't specify data type, then jquery will try to figure out response data type from response header. If server response header doesn't match json content type (it's set like text/plain or something), then you can use function that parses string to json. – longchiwen Feb 25 '14 at 20:51
If I don't use 'dataType:"json",', what's the default datatype? – AustintheCleric Feb 25 '14 at 20:53

Can't reading Json data using jquery

1 Answers1