javascript - Load JSON Data Using jQuery AJAX

I need to print this information when clicking a button and sorting if by date, so far i have this: I have json file that looks like this, but I haven't been able to print it on the page and still haven't got to the sorting by date part. I am not sure if the problem is the link to the ajax version i am using or what is the problem, because i saw an example that looks just like this on youtube and it works just fine.

JSON:

  [
{
    "users": [
        {
            "name": "user1",
            "Endorsement": "some ment",
            "date": "8/11/2012"
        },
        {
            "name": "user2",
            "Endorsement": "some ment2",
            "date": "9/27/11"
        },
        {
            "name": "user3",
            "Endorsement": "some ment3"
        },
        {
            "name": "user4",
            "Endorsement": "some ment4",
            "date": "4/2/13"
        },
        {
            "name": "user5",
            "Endorsement": "some ment5"
        },
        {
            "name": "user6",
            "Endorsement": "some ment6",
            "date": "3/17/13"
        },
        {
            "name": "user7",
            "Endorsement": "some ment7",
            "date": "5/22/13"
        },
        {
            "name": "user8",
            "Endorsement": "some ment8",
            "date": "9/27/13"
        }
    ]
}

]

HTML updated:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
    <link rel="shortcut icon" href="stridesFavicon.ico">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="shortcut icon" href='.ico' />

</head>
<body>
    <!--Body content-->

  <div id='Div1'>


    <a href="#" id="clickme">Get JSON Data</a>


    </div>


    <script type="text/javascript"     src=".10.2/jquery.min.js"></script>



    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script src="myscript.js" type="text/javascript" /></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });  
    </script>
</body>
</html>

JS updated:

$("#clickme").click(function () {

$.getJSON("users.json", function (data) {

    var items = [];
    $.each(data, function (key, dvalue) {


        $.each(dvalue, function (key, value) {
            items.push('<li id="' + key + '">' + value + '</li>');

        });
    });

    $('<ul/>', {
        'class': 'interest-list',
        html: items.join('')

    }).appendTo('body');

});

});

But is not working. meaning is not loading user names; instead it is printing something like this every time i click the link:

•[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JSON:

  [
{
    "users": [
        {
            "name": "user1",
            "Endorsement": "some ment",
            "date": "8/11/2012"
        },
        {
            "name": "user2",
            "Endorsement": "some ment2",
            "date": "9/27/11"
        },
        {
            "name": "user3",
            "Endorsement": "some ment3"
        },
        {
            "name": "user4",
            "Endorsement": "some ment4",
            "date": "4/2/13"
        },
        {
            "name": "user5",
            "Endorsement": "some ment5"
        },
        {
            "name": "user6",
            "Endorsement": "some ment6",
            "date": "3/17/13"
        },
        {
            "name": "user7",
            "Endorsement": "some ment7",
            "date": "5/22/13"
        },
        {
            "name": "user8",
            "Endorsement": "some ment8",
            "date": "9/27/13"
        }
    ]
}

]

HTML updated:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
    <link rel="shortcut icon" href="stridesFavicon.ico">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="shortcut icon" href='http://sites.google./site/lowcoupling/favicon_16x16.ico' />

</head>
<body>
    <!--Body content-->

  <div id='Div1'>


    <a href="#" id="clickme">Get JSON Data</a>


    </div>


    <script type="text/javascript"     src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>



    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script src="myscript.js" type="text/javascript" /></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });  
    </script>
</body>
</html>

JS updated:

$("#clickme").click(function () {

$.getJSON("users.json", function (data) {

    var items = [];
    $.each(data, function (key, dvalue) {


        $.each(dvalue, function (key, value) {
            items.push('<li id="' + key + '">' + value + '</li>');

        });
    });

    $('<ul/>', {
        'class': 'interest-list',
        html: items.join('')

    }).appendTo('body');

});

});

But is not working. meaning is not loading user names; instead it is printing something like this every time i click the link:

•[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Share Improve this question edited Jul 21, 2014 at 13:02 Majid 14.3k16 gold badges81 silver badges116 bronze badges asked Oct 1, 2013 at 17:32 Mario V 531 gold badge1 silver badge9 bronze badges

print( uneval(json) ); – adeneo Commented Oct 1, 2013 at 17:33
<script src="myscript.js" type="text/javascript" /> needs a closing tag, script tags can't be self closing. – Kevin B Commented Oct 1, 2013 at 17:38
Also, there's no ul on your page for the li's to be appended to. – Kevin B Commented Oct 1, 2013 at 17:39
Also check the browser's console to find out the error. – The Alpha Commented Oct 1, 2013 at 17:50
Also make sure that you put this code inside document.ready event. – The Alpha Commented Oct 1, 2013 at 17:53

Add a ment |

5 Answers 5

Sorted by: Reset to default 3

the jason is missing some mas, every line inside the json should end with a ma unless it is the last child in the scope, which makes it:

[
    {
        "users": [
            {
                "name": "user1",
                "Endorsement": "some ment",
                "date": "8/11/2012"
            },
            {
                "name": "user2",
                "Endorsement": "some ment2",
                "date": "9/27/11"
            },
            {
                "name": "user3",
                "Endorsement": "some ment3"
            },
            {
                "name": "user4",
                "Endorsement": "some ment4",
                "date": "4/2/13"
            },
            {
                "name": "user5",
                "Endorsement": "some ment5"
            },
            {
                "name": "user6",
                "Endorsement": "some ment6",
                "date": "3/17/13"
            },
            {
                "name": "user7",
                "Endorsement": "some ment7",
                "date": "5/22/13"
            },
            {
                "name": "user8",
                "Endorsement": "some ment8",
                "date": "9/27/3"
            }
        ]
    }
]

try !

$("button").click(function () {

$.getJSON("users.json", function (obj) {


    $.each(obj.users, function (key, value) {
        $("ul").append("<li>" + value.name + "</li>");

    });

});

});

and if there is error then use debug console in browser. and either make a fiddle or write what is error. and there seems no ul element in your html.

The json is not valid. I validated using http://jsonlint./ and it says error at line 6. You left a ma in below part:

"Endorsement": "some ment"  
               "date":"8/11/2012"

This is the first endorsement-date pair

$("button").click(function () {

$.getJSON("users.json", function (data) {



for (i in data)
{

for (k in data[i]) {
               alert(data[i][k]);
            }


});

});

$.ajax({
    type:'POST',
   url:'Default.aspx/GetPro',
  data:"{Pid:'"+ faram+"'}",
 contentType: 'application/json; charset=utf-8',
  dataType: 'json',
 async: true,
cache: false,

success: function(msg) {
 alert("{Pid:'"+ faram+"'}");
var orders =msg;
 if (orders.length > 0) {
test(orders);
   }
 else {
  alert("No Record Found");
   }
 },
error: function(xhr, textStatus, errorThrown) {
            alert(xhr.status);
              alert(errorThrown);
              alert(xhr.responseText);
        }

});

function test(data)
{

for (i in data)
          {
//ProductName Is Property Field Of c# Object
 alert(data[i]['ProductName'])
}



 }

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Load JSON Data Using jQuery AJAX - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)