我有从JSON检索的对象数组:
[{
"id": "19001",
"description": "Cars",
"first_name": "Max",
"surname": "Madison",
"contacts": "0743126525"
}, {
"id": "19001",
"description": "Cars",
"first_name": "Elis",
"surname": "Thunder",
"contacts": "hello@example.com"
}]
我在第一页上使用一个列表视图,该视图向我显示了两行。如果我单击了其中的一个,它将把我带到对象内部的所有详细信息重定向到下一页。
但是我想将两行合并为具有相同值的一行,然后将我重定向到第二页,并向我显示所有不等值的详细信息。
示例:
<!-- first page: -->
ID : 19001 | description Cars
<!-- second page: -->
<p>ID: 19001<p>
<p>Description: Cars<p>
<p>first_name: Max<p>
<p>surname: Madison<p>
<p>contacts: 0743126525<p>
<p>first_name: Elis<p>
<p>surname: Thunder<p>
<p>contacts: hello@example.com<p>
$(document).on("pageinit", "#info-page", function() {
$.getJSON("test.json", function(info) {
var li = "";
var results = [];
$.each(info, function(i, value) {
if ($.inArray(value.description, results) === -1) {
results.push(value.description);
li += '<li><a href="#" id="' + i + '" class="info-go"> ' + value.description + '</a></li>';
}
});
$("#prof-list").append(li).promise().done(function() {
$(this).on("click", ".info-go", function(e) {
e.preventDefault();
$("#details-page").data("info", info[this.id]);
$.mobile.changePage("#details-page");
});
$(this).listview("refresh");
});
});
});
$(document).on("pagebeforeshow", "#details-page", function() {
var info = $(this).data("info");
var info_view = "";
for (var key in info) {
info_view = info_view + '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
}
//$('#details-page').append(info_view);
$(this).find("[data-role=content]").html(info_view);
});
希望您能帮助我:)