javascript - 根据子元素的 props 对 Json 进行排序(对照表)

Question

我正在尝试显示一个表格，其中包含一些项目的比较。这个想法是以正确的方式排序(左边更少，右边更完整)，比如:

             Plan1  |  Plan2  |  Plan3
item1           X        X         X
item2           -        X         X
item3           -        -         X

但是我们 vendor 的 API 提供无序的 json。问题是我们有 100 多个项目和将近 20 个计划，因此无法以“硬编码”方式进行过滤。

json 是巨大的，所以只有最少的简单版本是(像这个例子):

[
    {
        "Id": "1",
        "Name": "Item1",
        "Plans": [
            {
                "PlanMaster": "EPTV Max",
                "IdPlan": 1000,
                "HasPlan": true
            },
            {
                "PlanMaster": "EPTV",
                "IdPlan": 1001,
                "HasPlan": true
            },
            {
                "PlanMaster": "Web TV",
                "IdPlan": 1002,
                "HasPlan": true
            }
        ]
    },
    {
        "Id": "2",
        "Name": "Item2",
        "Plans": [
            {
                "PlanMaster": "EPTV Max",
                "IdPlan": 1000,
                "HasPlan": false
            },
            {
                "PlanMaster": "EPTV",
                "IdPlan": 1001,
                "HasPlan": true
            },
            {
                "PlanMaster": "Web TV",
                "IdPlan": 1002,
                "HasPlan": true
            }
        ]
    },
    {
        "Id": "3",
        "Name": "Item3",
        "Plans": [
            {
                "PlanMaster": "EPTV Max",
                "IdPlan": 1000,
                "HasPlan": false
            },
            {
                "PlanMaster": "EPTV",
                "IdPlan": 1001,
                "HasPlan": false
            },
            {
                "PlanMaster": "Web TV",
                "IdPlan": 1002,
                "HasPlan": true
            }
        ]
    }
]

重点是，我如何在 json 中导航以查询诸如“我有多少计划”、“按从少到多的顺序列出计划”等几件事...

这种“排序”/“比较”的问题怎么称呼？我试图谷歌排序等......但找不到太多。我只想知道如何在 javascript 中查询节点，以便能够实现逻辑。

干杯

Answer 1

您可以将计划视为二进制数并将其用作排序标准。

var data = [{ "Id": "1", "Name": "Item1", "Plans": [{ "PlanMaster": "EPTV Max", "IdPlan": 1000, "HasPlan": true }, { "PlanMaster": "EPTV", "IdPlan": 1001, "HasPlan": true }, { "PlanMaster": "Web TV", "IdPlan": 1002, "HasPlan": true }] }, { "Id": "2", "Name": "Item2", "Plans": [{ "PlanMaster": "EPTV Max", "IdPlan": 1000, "HasPlan": false }, { "PlanMaster": "EPTV", "IdPlan": 1001, "HasPlan": true }, { "PlanMaster": "Web TV", "IdPlan": 1002, "HasPlan": true }] }, { "Id": "3", "Name": "Item3", "Plans": [{ "PlanMaster": "EPTV Max", "IdPlan": 1000, "HasPlan": false }, { "PlanMaster": "EPTV", "IdPlan": 1001, "HasPlan": false }, { "PlanMaster": "Web TV", "IdPlan": 1002, "HasPlan": true }] }];

data.sort(function (a, b) {
    function getRange(o) {
        var r = o.Plans.reduce(function (r, a) {
                return r * 2 + !a.HasPlan;
            }, 0);
      
        o.r = r; // just to show what's happen
        return r;
    }

    return getRange(a) - getRange(b);
});

console.log(data)

.as-console-wrapper { max-height: 100% !important; top: 0; }