javascript - 对对象列表进行排序 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"}]

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

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
  ))