Javascript每个循环通过JSON只获得第一个元素?
我正在使用Jquery mobile,所以忽略以下一些过度的css,它与核心问题无关。
我在我的JSON数据包/ javascript对象中循环“Places”时出现问题。 我收到了多个“地方”的回复,但似乎无法弄清楚如何迭代它们。 我的每个循环中的’i’变量对第一个元素正常工作,并显示其对应的名称和图像。
这是我的服务器端Django视图(如果您不熟悉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和回调方法已演变成这样:
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("" + data.Places[i].name + "
" + data.Places[i].events + " events "); }); }
我是如何混淆每个函数如何迭代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("" + place.name + " ...etc); }
请注意,我不知道您是否正在加载旨在包含HTML,不受信任的纯文本等的可信数据。您可能需要在插入数据之前对数据进行编码,或者(更好)在结构上插入数据而不是连接字符串,具体取决于您的用例。
您正在使用getJSON
并且each
都是错误的:
function loadJSON(){ $.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", callback); } function callback(data){ var target = $("#tonight-list"); $.each(data.Places, function(i) { target.append("..."); }); }
你必须传递回调函数的引用做getJSON
,而不是调用函数。
如果你执行$("#tonight-list").each()
那么你将迭代选择器选择的元素。 无论如何,此函数只接受一个参数(回调)。 请参阅文档 。
你想要$.each()
,它将数组作为第一个参数,将回调作为第二个参数。