使用jQuery和JSON显示MeetUp应用程序接口中的分组
使用jQuery和JSON显示MeetUp应用程序接口中的分组
提问于 2013-04-24 21:45:00
我正在尝试制作一个小工具，将显示一个人所属的Meetup组根据他们的成员ID。
这是我的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>Meetup Groups by Member ID</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON("https://api.meetup.com/2/groups?&sign=true&member_id=8377069&page=20&api&key=API_KEY&only=name,link", displayGroups);
function displayGroups(data) {
var htmlString = "";
$.each(data.items, function (i, item) {
htmlString += '<h3><a href="' + item.link + '" target="_blank">' + item.name + '</a></h3>';
});
$('#groups').html(htmlString);
}
});
</script>
</head>
<body>
<div id="groups"></div>
</body>
</html>这是JSON输出(当我将请求URL放在浏览器中时)：
{"results":[{"name":"The New York Python Meetup Group","link":"http:\/\/www.meetup.com\/nycpython\/"},{"name":"WordPress NYC Meetup Group","link":"http:\/\/www.meetup.com\/WordPressNYC\/"},{"name":"Coworking Community NYC","link":"http:\/\/www.meetup.com\/coworking-nyc\/"},{"name":"NYC Ruby Roundtable","link":"http:\/\/www.meetup.com\/nycruby\/"},{"name":"Why Leave Astoria?!","link":"http:\/\/www.meetup.com\/whyleaveastoria\/"},{"name":"#betaNYC, formerly Open NY Forum","link":"http:\/\/www.meetup.com\/betanyc\/"},{"name":"New York Open Statistical Programming Meetup","link":"http:\/\/www.meetup.com\/nyhackr\/"},{"name":"Django-NYC","link":"http:\/\/www.meetup.com\/django-nyc\/"},{"name":"NYC Redditors","link":"http:\/\/www.meetup.com\/NYC-Redditors\/"},{"name":"Startup Addicts NYC","link":"http:\/\/www.meetup.com\/startupddict\/"},{"name":"Woodside - Sunnyside Runners","link":"http:\/\/www.meetup.com\/Woodside-Sunnyside-Runners\/"},{"name":"NY HTML5 User Group","link":"http:\/\/www.meetup.com\/NY-HTML5-User-Group\/"},{"name":"Hacks\/Hackers New York","link":"http:\/\/www.meetup.com\/hackshackersny\/"},{"name":"New York City Geek Adventure Group","link":"http:\/\/www.meetup.com\/Astoria-Long-Island-City-Geek-Adventure-Group\/"},{"name":"Mukti's Kitchen","link":"http:\/\/www.meetup.com\/MuktisKitchen\/"},{"name":"Unearth Ruby","link":"http:\/\/www.meetup.com\/unearthruby\/"},{"name":"Awesome People of Sunnyside Queens Unite!","link":"http:\/\/www.meetup.com\/Awesome-People-of-Sunnyside-Queens-Unite\/"},{"name":"New York Data Visualization and Infographics","link":"http:\/\/www.meetup.com\/New-York-Datavisualization-and-Infographics\/"},{"name":"Google NYC Tech Talks","link":"http:\/\/www.meetup.com\/google-nyc-tech-talks\/"},{"name":"Crisismappers NYC","link":"http:\/\/www.meetup.com\/Crisismappers-NYC\/"}],"meta":{"lon":"","count":20,"signed_url":"http:\/\/api.meetup.com\/2\/groups?radius=25.0&order=id&desc=false&member_id=8377069&offset=0&format=json&only=name%2Clink&page=20&fields=&sig_id=8377069&sig=651d9c728df7bb62915fdc1fbae1b2b87d36c35b","link":"https:\/\/api.meetup.com\/2\/groups","next":"https:\/\/api.meetup.com\/2\/groups?key=4d366a414432e7e442d6eb1e124f&radius=25.0&order=id&member_id=8377069&format=json&page=20&desc=false&offset=1&only=name%2Clink&fields=&sign=true","total_count":26,"url":"https:\/\/api.meetup.com\/2\/groups?key=4d366a414432e7e442d6eb1e124f&radius=25.0&order=id&member_id=8377069&format=json&page=20&desc=false&offset=0&only=name%2Clink&fields=&sign=true","id":"","title":"Meetup Groups v2","updated":1366809331000,"description":"\"\"","method":"Groups","lat":""}}我在控制台中没有收到任何错误。页面上不会打印任何内容。你知道我做错了什么吗？
编辑:我想我实际上并没有检索到任何数据。当我测试HTML页面时，控制台不显示响应，但当我在浏览器中运行API调用URL时，控制台显示响应。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-24 22:44:55
疱疹皮肤病接口请求URL中需要有?callback?。
完整答案：
<!DOCTYPE html>
<html>
<head>
<title>Meetup Groups by Member ID</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("https://api.meetup.com/2/groups?callback=?&sign=true&member_id=8377069&page=20&api&key=API_KEY&only=name,link",
function (data) {
var htmlString = "";
$.each(data.results, function (i, item) {
htmlString += '<h3><a href="' + item.link + '" target="_blank">' + item.name + '</a></h3>';
});
$('#groups').html(htmlString);});
});
</script>
</head>
<body>
<div id="groups"></div>
</body>
</html>Stack Overflow用户
发布于 2013-04-24 22:13:43
我确实认为函数在用作回调之前需要定义。我会将其更改为：
$.getJSON("https://api.meetup.com/2/groups?&sign=true&member_id=8377069&page=20&api&key=API_KEY&only=name,link",
function (data) {
var htmlString = "";
$.each(data.items, function (i, item) {
htmlString += '<h3><a href="' + item.link + '" target="_blank">' + item.name + '</a></h3>';
});
$('#groups').html(htmlString);});这避免了不必要的函数定义，使您的代码更加整洁。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16193653
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号