我使用的是Jquery mobile,因此请忽略以下一些过度的CSS,它与核心问题无关。
我在循环 JSON 数据包/javascript 对象中的“位置”时遇到问题。我收到多个“地点”的响应,但似乎不知道如何迭代它们。我的每个循环中的“i”变量对于第一个元素正常工作,并显示其相应的名称和图像。
这是我的服务器端 Django View (如果您不熟悉 Python,那么非常简单):
def tonight_mobile(request):
callback = request.GET.get('callback', '')
def with_rank(rank, place):
return (rank > 0)
place_data = dict(
Places = [make_mobile_place_dict(request, p) for p in Place.objects.all()]
)
xml_bytes = json.dumps(place_data)
return HttpResponse(xml_bytes, content_type='application/json; charset=utf-8')
我的服务器正在确认请求并返回以下内容:
"GET /api/0.1/tonight-mobile.json&callback=jsonp1293142434434 HTTP/1.1" 200 167
这是我的回复:
callback({"Places": [{"url": "http://localhost:8000/api/0.1/places/3.plist",
"image_url": "http://localhost:8000/static/place_logos/Bengals_1.png",
"name": "Bob's Place", "events": 2},
{"url": "http://localhost:8000/api/0.1/places/2.plist",
"image_url": "http://localhost:8000/static/place_logos/Makonde_Mask.gif",
"name": "My Bar", "events": 0},
{"url": "http://localhost:8000/api/0.1/places/1.plist",
"image_url": "http://localhost:8000/static/place_logos/Quintons_1.png",
"name": "Quinton's", "events": 1}]})
------------
我的 getJSON 和回调方法已经演变成这样:
<script>
function loadJSON(){
$.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", callback(data));
}
function callback(data){
$("#tonight-list").each(data.Places, function(i) {
$(this).append("<li role='option' tabindex='" + data.Places[i] + "' class='ui-li-has-thumb ui-li ui-btn ui-btn-icon-right ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-down-c ui-btn-up-c' data-theme='c'><div class='ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last'><span class='ui-icon ui-icon-arrow-r'></span><div class='ui-btn-text'><img src=" + data.Places[i].image_url + " alt=" + data.Places[i].name + " class='ui-li-thumb ui-corner-tl ui-corner-bl'/><h1 class='list-title ui-li-heading' id='list-title'><a href='detail.html?id=slide' data-transition='slide' class='ui-link-inherit'>" + data.Places[i].name + "</a></h1><span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + data.Places[i].events + " events</span></div></div></li>");
});
}
</script>
我是否对每个函数如何迭代 JSON(成为)Javascript 对象感到困惑?我很确定每个都是我的问题,因为我只得到“地点”列表的第一个元素。有人可以帮我了解如何构造循环吗?
最佳答案
each()
不是这样工作的。它获取页面上的一组元素,并循环遍历它们,为每个元素调用一个函数。在这种情况下,您将循环 $("#tonight-list")
,其中只有一项(ID 应该唯一标识文档中的一个元素)。
您似乎想要做的是循环数据(而不是#tonight-list
元素),并将数据添加到该元素,对吗?在这种情况下,您希望普通的 JavaScript 执行循环,如下所示:
var list = $("#tonight-list");
for (var i=0, place; place=data.Places[i]; ++i) {
list.append("<li role='option' tabindex='" + i + "'>" + place.name + "</li> ...etc);
}
请注意,我不知道您是否正在加载包含 HTML、不可信纯文本等的可信数据。您可能需要在插入数据之前对数据进行编码,或者(更好)按结构插入数据而不是连接字符串,取决于您的用例。
关于Javascript 每次循环 JSON 时只获取第一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4664190/