从 Json 数据创建复杂表

Question

我有一个看起来像这样的 JSON[{    "teacher": "teacher1",    "student": "student1"    },{   "teacher": "teacher1",    "student": "student1"    },{    "teacher": "teacher1",    "student": "student1"    },{    "teacher": "teacher2",    "student": "student1"    },{   "teacher": "teacher2",    "student": "student2"    }]我想将它转换成这样的方式，它可以向我显示每个老师的计数[    {        "teacherName": "teacher1",        "teacherCount": "3"    },    {        "teacherName": "teacher2",        "teacherCount": "2"    },]我正在开发一个节点项目，我需要在表格中打印这些数据。

Answer 1

您可以构建一个 Map（使用.reduce()），它由teacher值索引/键控。存储在teacher 中的值是在您的对象数组中看到teacher 的次数的计数。Array.from()然后，您可以使用Mapbuild using reduce 从映射中获取每个键值对（其中键是teacherName，值是teacherCount）。要获取每个键值对，您可以使用 Array.from() 的映射函数并将每个键值 ([key, value]) 映射到一个对象，如下所示：

const data = [{ "teacher": "teacher1", "student": "student1" }, { "teacher": "teacher1", "student": "student1" }, { "teacher": "teacher1", "student": "student1" }, { "teacher": "teacher2", "student": "student1" }, { "teacher": "teacher2", "student": "student2" } ];

const res = Array.from(data.reduce((map, {teacher}) => {

  return map.set(teacher, (map.get(teacher) || 0) + 1);

}, new Map), ([teacherName, teacherCount]) => ({teacherName, teacherCount}));

console.log(res);

Answer 2

您可以使用 将您的计数收集到一个唯一的集合中reduce，如果存在，则增加教师，否则将其初始化为 1。然后是如何格式化的示例如下使用map。

let data = getData();

let teachers = data.reduce((acc, val) => {

  if (val.teacher in acc)

    acc[val.teacher]++;

  else

    acc[val.teacher] = 1;

  return acc;

}, {});

let formatted = Object.entries(teachers).map(

  ([teacherName, teacherCount]) => ({ teacherName, teacherCount })

);

console.log(formatted);

/*****************************************************************/

function getData() {

  return [{

      "teacher": "teacher1",

      "student": "student1"

    },

    {

      "teacher": "teacher1",

      "student": "student1"

    },

    {

      "teacher": "teacher1",

      "student": "student1"

    },

    {

      "teacher": "teacher2",

      "student": "student1"

    },

    {

      "teacher": "teacher2",

      "student": "student2"

    }

  ]

}