遍历jQuery mobile中具有相同值的对象数组

时间:2018-09-06 15:00:16

标签: javascript jquery

我有从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);
});      

希望您能帮助我:)

0 个答案:

没有答案