从API收到的json循环

时间:2012-05-21 01:13:38

标签: javascript jquery json parsing

我似乎只得到姓氏的最后一个条目。我整天都花在这上面,并且想知道是否有人能看到我所缺少的东西。 谢谢

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: "http://testsite.legisconnect.com/list.php",
                    dataType: "json",
                    success: function (data) {
                        $.each(data.response.legislators, function (i, item) {
                            $('#here').html(item.legislator.lastname);
                        });
                    }
                });
            });
        </script>
    </head>

    <body>
        <div id="here"></div>
    </body>

</html>

JSON

{
    "response": {
        "legislators": [{
            "legislator": {
                "website": "http://ackerman.house.gov/",
                "fax": "202-225-1589",
                "govtrack_id": "400003",
                "firstname": "Gary",
                "chamber": "house",
                "middlename": "L.",
                "lastname": "Ackerman",
                "congress_office": "2111 Rayburn House Office Building",
                "eventful_id": "",
                "phone": "202-225-2601",
                "webform": "http://www.house.gov/writerep",
                "youtube_url": "http://www.youtube.com/RepAckerman",
                "nickname": "",
                "gender": "M",
                "district": "5",
                "title": "Rep",
                "congresspedia_url": "http://www.opencongress.org/wiki/Gary_Ackerman",
                "in_office": true,
                "senate_class": "",
                "name_suffix": "",
                "twitter_id": "repgaryackerman",
                "birthdate": "1942-11-19",
                "bioguide_id": "A000022",
                "fec_id": "H4NY07011",
                "state": "NY",
                "crp_id": "N00001143",
                "official_rss": "",
                "facebook_id": "RepAcherman",
                "party": "D",
                "email": "",
                "votesmart_id": "26970"
            }
        }, {
            "legislator": {
                "website": "http://adams.house.gov/",
                "fax": "202-226-6299",
                "govtrack_id": "412414",
                "firstname": "Sandra",
                "chamber": "house",
                "middlename": "",
                "lastname": "Adams",
                "congress_office": "216 Cannon House Office Building",
                "eventful_id": "",
                "phone": "202-225-2706",
                "webform": "",
                "youtube_url": "http://www.youtube.com/RepSandyAdams",
                "nickname": "",
                "gender": "F",
                "district": "24",
                "title": "Rep",
                "congresspedia_url": "http://www.opencongress.org/wiki/Sandy_Adams",
                "in_office": true,
                "senate_class": "",
                "name_suffix": "",
                "twitter_id": "RepSandyAdams",
                "birthdate": "1956-12-14",
                "bioguide_id": "A000366",
                "fec_id": "H0FL24049",
                "state": "FL",
                "crp_id": "N00030926",
                "official_rss": "",
                "facebook_id": "",
                "party": "R",
                "email": "",
                "votesmart_id": "31041"
            }
        }, {
            "legislator": {
                "website": "http://aderholt.house.gov/",
                "fax": "202-225-5587",
                "govtrack_id": "400004",
                "firstname": "Robert",
                "chamber": "house",
                "middlename": "B.",
                "lastname": "Aderholt",
                "congress_office": "2264 Rayburn House Office Building",
                "eventful_id": "",
                "phone": "202-225-4876",
                "webform": "http://aderholt.house.gov/?sectionid=195&sectiontree=195",
                "youtube_url": "http://www.youtube.com/RobertAderholt",
                "nickname": "",
                "gender": "M",
                "district": "4",
                "title": "Rep",
                "congresspedia_url": "http://www.opencongress.org/wiki/Robert_Aderholt",
                "in_office": true,
                "senate_class": "",
                "name_suffix": "",
                "twitter_id": "Robert_Aderholt",
                "birthdate": "1965-07-22",
                "bioguide_id": "A000055",
                "fec_id": "H6AL04098",
                "state": "AL",
                "crp_id": "N00003028",
                "official_rss": "",
                "facebook_id": "RobertAderholt",
                "party": "R",
                "email": "",
                "votesmart_id": "441"
            }
        }]
    }
}

2 个答案:

答案 0 :(得分:4)

通过每次迭代使用.html(),您将覆盖结果。因此,仅显示最后一个条目。请尝试使用.append()

答案 1 :(得分:3)

在您的成功处理程序中,您循环遍历集合并每次使用新条目替换innerHTML。

               success: function (data) {
                    $.each(data.response.legislators, function (i, item) {
                        $('#here').html(item.legislator.lastname);
                    });
                }

因此,当您到达循环的末尾时,只会插入最新的姓氏,因为所有其他姓氏都已被重复替换。

你是否意味着追加,如下例所示?或者每次都可以在不同的元素中插入名称?

               success: function (data) {
                    $.each(data.response.legislators, function (i, item) {
                        $('#here').append('<span>' + item.legislator.lastname + '</span>');
                    });
                }