问我想要显示类别(在给定的例子爱好)基于用户的列表。寻找基于javascript的解决方案

EN

let a = [
  { name: 'disha', age: 28, hobbies: ['dance', 'sing', 'travel'] },
  { name: 'nisha', age: 28, hobbies: ['dance', 'cook', 'travel', 'Play'] },
  { name: 'fisha', age: 28, hobbies: ['dance', 'sing'] },
  { name: 'sisha', age: 28, hobbies: ['donothing'] },
  { name: 'lisha', age: 28, hobbies: ['travel', 'Exploring'] },
];

const formatData = data =>
  data.reduce((res, { name, age, ...rest }) => {
    rest.hobbies.forEach(hobby => {
    //Check if the hobby is present in the result object
    //and push the new user to existing `users` array
    //else create a new hobby object with `users` as a property
      if (res[hobby]) {
        res[hobby].users.push({ name, age });
      } else {
        res[hobby] = {
          users: [{ name, age }],
        };
      }
    });
    return res;
  }, {});

console.log(formatData(a));

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

let a = [
  { name: 'disha', age: 28, hobbies: ['dance', 'sing', 'travel'] },
  { name: 'nisha', age: 28, hobbies: ['dance', 'cook', 'travel', 'Play'] },
  { name: 'fisha', age: 28, hobbies: ['dance', 'sing'] },
  { name: 'sisha', age: 28, hobbies: ['donothing'] },
  { name: 'lisha', age: 28, hobbies: ['travel', 'Exploring'] },
];

const formatData = data => {
  const finalRes = data.reduce((res, { name, age, ...rest }) => {
    rest.hobbies.forEach(hobby => {
    //Check if the hobby is present in the result object
    //and push the new user to existing `users` array
    //else create a new hobby object with `category` and `users` as properties
      if (res[hobby]) {
        res[hobby].users.push({ name, age });
      } else {
        res[hobby] = {
          category: hobby,
          users: [{ name, age }],
        };
      }
    });
    return res;
  }, {});

  return Object.values(finalRes);
};

console.log(formatData(a));

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

let a = [
    {name: "disha", age: 28, hobbies: ['dance', 'sing', 'travel']},
    {name: "nisha", age: 28, hobbies: ['dance', 'cook', 'travel', 'Play']},
    {name: "fisha", age: 28, hobbies: ['dance', 'sing']},
    {name: "sisha", age: 28, hobbies: ['donothing']},
    {name: "lisha", age: 28, hobbies: ['travel', 'Exploring']}
];

/***
     *** For Demo ***
     establishing a target element and appending a child container for the 
     given requirement -- you can use your mechanism
*/

let newNode = document.createElement("div")
newNode.id = 'newCategory'
document.querySelector('#mainbar').appendChild(newNode)

a.forEach(val => {
    val.hobbies.forEach(element => {

        //condition to check if category already exit, if not create one
        if(!document.querySelector(`#${element}`)){
            let newCat = document.createElement('h2')
            newCat.id = element
            newCat.innerText = element.charAt(0).toUpperCase() + element.slice(1)
            document.querySelector('#newCategory').appendChild(newCat)
        }
        // you can add CSS or child of component of your will
        let paraG = document.createElement('p')
        paraG.textContent = val.name
        document.querySelector(`#${element}`).appendChild(paraG)
    });
})