按鍵值對JavaScript數組中的對象進行排序

Question

我可能想出了一種非常粗略的方法來完成這種事情，但是我認為我想請SO的許多專家參加。 基本上，我有一個看起來像下面的數組：

var bugs = [
    {
        id: "197526",
        title: "Updating Lighthouse",
        summary: "Enhancing the UI of Lighthouse",
        status: "Active",
        project: "Lighthouse",
        area: "Internal Web Applications",
        hours: 19
    },
    {
        id: "190328",
        title: "Adding Login Authentication to Lighthouse",
        summary: "Create a login authentication process for Lighthouse",
        status: "Active",
        project: "Lighthouse",
        area: "Administration",
        hours: 12
    },
    ...
    {
        id: "187562",
        title: "Create a Maintenance Page",
        summary: "Create a maintenance page to be displayed with the company site is down",
        status: "Resolved",
        project: "Other",
        area: "Internal Web Projects",
        hours: 4
    },
];

基本上，數組包含幾個“錯誤”，每個錯誤都有一個id，標題，摘要，狀態，項目，區域和hours屬性。 這些錯誤中的每一個都將顯示在我的Web應用程序上，但是我允許用戶選擇如何將它們分組。 按狀態，項目或區域划分。 根據他們從上面的選擇框中選擇的三個中的哪一個，我希望能夠對所有錯誤進行排序，並按照他們選擇的類別對它們進行分組。 然后，當要顯示它們時，對於該類別的每個當前選項都有一個簡單的標題。 例如，如果要按狀態排序，則將類似於：

Group By: Status

Active
------
Bug with status: "active"
Bug with status: "active"
Bug with status: "active"

Resolved
--------
Bug with status: "resolved"
Bug with status: "resolved"

我是否應該遍歷整個bug數組，並根據要分類的類別，簡單地為該類別的每個可能選項創建一個新數組，並向其中添加適當的bug？ 因此，在上述情況下，創建新數組var activeBugs = []和var resolvedBugs = [] var activeBugs = [] var resolvedBugs = []嗎？ 如果是這樣，那么我的問題將是知道有哪些可能的選擇。 然后，在創建這些新數組之前，我是否應該首先遍歷整個bug數組以查看欲望組類別存在哪些可能的選項？

不借助其他jQuery插件的最佳方法是什么？

Answer 1

用戶會得到所有錯誤的副本嗎？ 還是只發送前100個？

• 如果您發送前100個，我建議您在服務器上建立3個數組，其中包含指向對象的指針，並且根據其位置插入每個新的錯誤。 然后只需從請求的列表中發送即可。 那應該很快，因為您只是獲取信息。 並且排序是在插入時進行的。 （添加錯誤時，所有“排序”都已完成-假設您編輯信息時查看信息的頻率更高！）
• 如果客戶端持有所有數據的副本，則只需使用javascript在客戶端上對其重新排序即可。 不應花費太多時間。 這樣可以節省帶寬，並假設您沒有太多錯誤，因此可以一次顯示所有錯誤。

Answer 2

使用array.sort按狀態對數組進行排序。 遍歷數組，記住上一次迭代的.status屬性是什么。 更改時，創建一個新的視覺表示。

bugs.sort(mySortFunc);

var lastStatus = '';
for (var i=0, b; b = bugs[i]; i++) {
  if (b.status != lastStatus) {
    //output a header for the new status b.status
    document.write(b.status + '<br>----<br>');
    lastStatus = b.status;
  }
  // output the bug
  document.write(b.title + '<br>');
}

警告：最終，您希望您讓數據庫完成所有排序/分組/分頁/等操作。

Answer 3

這是我在評論中描述的使用.filter()的示例：

var active_bugs = bugs.filter(function(bug) {
    return bug.status === "active";
});

Answer 4

要詳細說明我對根本是否需要排序/過濾的質疑，您可以在顯示邏輯中做（大致）這樣的事情嗎？

$('#SortOrder').live('change', function() {
  var groupby = $(this).val();

  $('#Bugs').empty();

  for (var i = 0; i < bugs.length; i++) {
    if (!document.getElementById(bugs[i][groupby])) {
        $('<h3>', { text: bugs[i][groupby] }).appendTo('#Bugs');

        $('<ul>', {
            id: bugs[i][groupby]
        }).appendTo('#Bugs');
    }

    var $li = $('<li>', {
        text: bugs[i].title
    });

    $('#Bugs').find('#' + bugs[i][groupby]).append($li);
  }
});

工作演示： http : //jsfiddle.net/TTApQ/1/

這樣，根本就沒有排序或過濾，您只需要對數組進行一次遍歷。