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

在准备渲染时，对对象的条目（不仅是键）进行排序，以使您拥有一个包含键和相关值的排序数组，同时包含以下信息：

Answer 2

问题在于，当您还应该使用键对对象进行排序时，您仅使用subscriptionStoreProduct = await GetSubscriptionProductAsync(); if (subscriptionStoreProduct == null) { return; } // Check if the first SKU is a trial and notify the customer that a trial is available. // If a trial is available, the Skus array will always have 2 purchasable SKUs and the // first one is the trial. Otherwise, this array will only have one SKU. StoreSku sku = subscriptionStoreProduct.Skus[0]; if (sku.SubscriptionInfo.HasTrialPeriod) { // You can display the subscription trial info to the customer here. You can use // sku.SubscriptionInfo.TrialPeriod and sku.SubscriptionInfo.TrialPeriodUnit // to get the trial details. } else { // You can display the subscription purchase info to the customer here. You can use // sku.SubscriptionInfo.BillingPeriod and sku.SubscriptionInfo.BillingPeriodUnit // to provide the renewal details. }来执行排序。您遇到的另一个问题是，通常不希望对象键处于特定顺序。将渲染功能更改为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()将它返回到数组。同样，尽管这些天应该保持关键顺序，但依靠它仍然感觉不直观。

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

排序对象列表javascript

3 个答案: