Question

我正在使用Jquery mobile，所以忽略以下一些过度的css，它与核心问题无关。

我在我的JSON数据包/ javascript对象中循环“Places”时出现问题。我得到了多个“地方”的回复，但似乎无法弄清楚如何迭代它们。我的每个循环中的'i'变量对第一个元素正常工作，并显示其相应的名称＆amp;图像。

这是我的服务器端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和回调方法已演变为：

<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对象？我很确定每个都是我的问题，因为我只获得了“地方”列表的第一个元素。有人可以帮我解决如何构建循环的问题吗？

Answer 1

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，不受信任的纯文本等的可信数据。您可能需要在插入数据之前对数据进行编码，或者（更好）在结构上插入数据而不是连接字符串，取决于您的用例。

Answer 2

您正在以错误的方式使用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()，那么您将迭代选择器选择的元素。无论如何，此函数只接受一个参数（回调）。 See the documentation

您希望$.each()将数组作为第一个参数，将回调作为第二个参数。

Javascript每个循环通过JSON只获得第一个元素？

------------

2 个答案: