create complex table from the Json data

Question

I have a JSON that looks like this

[
{
    "teacher": "teacher1",
    "student": "student1"
    },
{
   "teacher": "teacher1",
    "student": "student1"
    },
{
    "teacher": "teacher1",
    "student": "student1"
    },
{
    "teacher": "teacher2",
    "student": "student1"
    },
{
   "teacher": "teacher2",
    "student": "student2"
    }
]

I want to convert it in a way that it shows me the count for each teacher like this

[
    {
        "teacherName": "teacher1",
        "teacherCount": "3"
    },
    {
        "teacherName": "teacher2",
        "teacherCount": "2"
    },
]

I am working on a node project where I need to print this data in a table.

Are the students irrelevant? Are you asking for the conversion or the (presumably HTML) table? How is this related to jQuery? Familiarize yourself with [how to access and process nested objects, arrays or JSON](https://stackoverflow.com/q/11922383/4642212) and use the available [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods_of_the_Object_constructor) and [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods) methods. Googling `js count property array of objects` yields insights. — Sebastian Simon, Apr 17 '20 at 03:09
I might want to use student data in the future. If I can crack it with teacher then I can do the rest with the student as well. — creativated, Apr 17 '20 at 03:10

Nick Parsons · Accepted Answer · 2020-04-17T03:16:13.073

You can build a Map (using .reduce()), which is indexed/keyed by the teacher value. The value stored at the teacher is the count of the number of times that teacher has been seen in your array of objects. You can then use Array.from() with the Map built using reduce to get each key-value pair from the map (where the key is the teacherName and value is the teacherCount). To get each key-value pair, you can use the mapping function of Array.from() and map each key-value ([key, value]) to an object like so:

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

Well done, seems you beat me and you made use of `Map` – Mike Apr 17 '20 at 03:26 — Mike, Apr 17 '20 at 03:26

score 0 · Answer 2 · answered Apr 17 '20 at 03:24

You can collect your counts into a unique set using reduce, incrementing the teacher if it exists, otherwise initiating it to 1. Then an example of how to format follows using 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"
    }
  ]
}

create complex table from the Json data

2 Answers2

Linked