排序對象列表javascript

Question

我有以下列表，從api獲取數據：

 const Studentdata = {
   "StudentName1": {
        "active": true,
        "gender": "male" 
    },
    "StudentName2": {
        "active": false,
        "gender": "male" 
    },
    "StudentName3": {
        "active": false,
        "gender": "female" 
    },
   "StudentName4": {
        "active": true,
        "gender": "female" 
    },
   "StudentName5": {
        "active": true,
        "gender": "female" 
    },
    "StudentName6": {
        "active": false,
        "gender": "female" 
    }
}

並且我像這樣渲染此數據：

Object.keys(Studentdata).map(item => {
    return (
         <>
             <span>{item}</span>
             // will use {Studentdata[item]} list to render ul,li
    )

 })

因此，在這里我要根據學生/她是否處於活動狀態來過濾學生數據，活動的真實項目應該排在第一位。 預期的操作是：

const Studentdata = {
   "StudentName1": {
        "active": true,
        "gender": "male" 
    },
    "StudentName4": {
        "active": true,
        "gender": "male" 
    },
    "StudentName5": {
        "active": true,
        "gender": "female" 
    },
   "StudentName2": {
        "active": false,
        "gender": "female" 
    },
   "StudentName3": {
        "active": false,
        "gender": "female" 
    },
    "StudentName6": {
        "active": false,
        "gender": "female" 
    }
}

我在React js中使用它，所以我需要精確的格式來渲染/重新渲染DOM。 因為，我需要這個“ StudentName1”來取消此名稱下的學生姓名，我將顯示他的詳細信息。 我可以得到以下內容：

Object.values(Studentdata).sort((a, b) => b.active - a.active)

但這給了我：

[0: {active: true, gender: "male"},
1: {active: true, gender: "female"},
2: {active: true, gender: "female"},
3: {active: false, gender: "male"},
4: {active: false, gender: "female"}]

但是如果我渲染這個，我需要更改render方法，所以需要我上面提到的格式。

Answer 1

准備渲染時，對對象的條目（不僅是鍵）進行排序，這樣就可以得到一個包含鍵和相關值的排序數組：

Object.entries(Studentdata)
  .sort((a, b) => b[1].active - a[1].active)
  .map(([name, { active, gender }]) => (
    // render ul, li with variables name, active, and gender
  ))

Answer 2

問題在於，當您還應該使用鍵對對象進行排序時，您僅使用values()進行排序。 您遇到的另一個問題是，通常不希望對象鍵處於特定順序。 將渲染函數更改為results.map而不是Object.keys(results).map更有意義。 這是您所需的輸出：

 const Studentdata = { "StudentName1": { "active": true, "gender": "male" }, "StudentName2": { "active": false, "gender": "male" }, "StudentName3": { "active": false, "gender": "female" }, "StudentName4": { "active": true, "gender": "female" }, "StudentName5": { "active": true, "gender": "female" }, "StudentName6": { "active": false, "gender": "female" } } const sorted = Object.entries(Studentdata) .sort((a, b) => b[1].active - a[1].active) .reduce((r, [key, value]) => { r[key] = value return r }, {}) console.log(sorted) 

如果刪除reduce() ，則將獲得所需的結果，但僅在數組中即可。 這是可取的，因為reduce是多余的，因為無論如何您都可以使用Object.keys()將它返回到數組。 同樣，盡管這些天應該保持關鍵順序，但依靠它仍然感覺不直觀。

Answer 3

在Object.entries排序，然后在map語句中重建對象（不幸的是使用eval來保留變量名）：

const Studentdata = {
   "StudentName1": {
        "active": true,
        "gender": "male" 
    },
    "StudentName2": {
        "active": false,
        "gender": "male" 
    },
    "StudentName3": {
        "active": false,
        "gender": "female" 
    },
   "StudentName4": {
        "active": true,
        "gender": "female" 
    },
   "StudentName5": {
        "active": true,
        "gender": "female" 
    },
    "StudentName6": {
        "active": false,
        "gender": "female" 
    }
};

Object.entries(Studentdata).sort((a, b) => b[1].active - a[1].active).map(([ name: objName, { active, gender } ]) => (
    eval(`let ${objName} = { active: ${active}, gender: ${gender} }`);
    return (
        <>
            <span>{name}</span>
    )
));