javascript - 循环访问从 API 接收到的 json

标签 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"
            }
        }]
    }
}

最佳答案

通过使用.html()每次迭代,你都会覆盖你的结果。因此,仅显示最后一个条目。尝试使用.append()相反。

关于javascript - 循环访问从 API 接收到的 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10678555/

相关文章:

javascript - 为什么 React 组件会在每次 useEffect 依赖项更改时卸载?

javascript - 如何在javascript闭包调用中生成动态字符串

javascript - 如何解析 Rest Api json 响应并将数据插入 Jade 模板(Node.js + express)?

javascript - 有没有办法使用 javascript 将 <td> 添加到每个表格行

javascript - 使用 Redux Saga 更新单个状态属性的最佳实践

javascript - 使用 Javascript 查找非零数字的最后一个索引

jquery - 找到掉落的元素

javascript - 连接 JS 文件

json - 如何从 Golang 中的 HTTP GET 请求发送 JSON 响应?

javascript - 函数调用在我的页面中不起作用