сгруппировать в jquery с .map ()

Question

У меня есть массив, где у каждого элемента есть имя и подраздел. Теперь я хочу сгруппировать эти элементы по подразделам. Есть ли способ сделать группу внутри функции отображения.

Данные выглядят так: * 0: «Наименование: Учебный подраздел: Образование» 1: «Наименование: Классы подраздел: Образование» 2: «Название: Общество Подраздел: Социальный»

Я хочу, чтобы он выглядел как

Образование 1.Study 2.Classes

Социальные 1.Society

Вот мой код, который пока не работает. Я думаю, что для правильной работы требуется небольшая настройка.

let myArray = response.map(item => {
          return   'name: ' + item.name + ' subSection: '  + item.subSection;
        }
        );
let grouppedArray1=_.groupBy(myArray, 'subSection'))

Answer 1

В вашем случае метод Array#map создает массив строк, и вы пытаетесь сгруппировать по свойству subSection, но такого свойства для строки не существует.

Вы можете сделать что-то простое, используя метод Array#reduce.

// iterate over the element
let res = response.reduce((obj, item) => {
  // define group if not defined(property with subsection name and value as array)
  obj[item.subSection] = obj[item.subSection] || [];

  // push the value to group
  obj[item.subSection].push('name: ' + item.name + ' subSection: '  + item.subSection);

  // return the object 
  return obj;

  // set initial value as empty object for result
}, {});

let response = [{
    "name": "Study",
    subSection: "Education"
  }, {
    "name": "Classes",
    subSection: "Education"
  },
  {
    name: "Society",
    subSection: "Social"
  }
];

let res = response.reduce((obj, item) => {
  obj[item.subSection] = obj[item.subSection] || [];
  obj[item.subSection].push('name: ' + item.name + ' subSection: ' + item.subSection);
  return obj;
}, {});

console.log(res);

ОБНОВЛЕНИЕ: Чтобы показать их как кнопки (вместе), сделайте что-то вроде этого:

let response = [{
    "name": "Study",
    subSection: "Education"
  }, {
    "name": "Classes",
    subSection: "Education"
  },
  {
    name: "Society",
    subSection: "Social"
  }
];

let res = response.reduce((obj, item) => {
  obj[item.subSection] = obj[item.subSection] || [];
  obj[item.subSection].push(item.name);
  return obj;
}, {});


// get values array and iterate 
Object.keys(res).forEach(function(k) {
  // generate h3 ith subSection value and append
  $('#container').append(
      $('<h3>', {
        text: k,
        class : 'title'
      })
    )
    // generate buttons and append
    .append(res[k].map(v =>
      $('<button>', {
        text: v,
        class : 'btn btn-default'
      })
    ))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>