排序对象列表javascript

问题描述

我有以下列表，从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方法，所以需要我上面提到的格式。

问题在于，当您还应该使用键对对象进行排序时，您仅使用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()将它返回到数组。 同样，尽管这些天应该保持关键顺序，但依靠它仍然感觉不直观。

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