使用 .map() 在 jquery 中分组

Question

我有一个数组，其中每个元素都有一个名称和一个小节。我现在想按小节对这些元素进行分组。有没有办法在映射函数中进行分组。

数据如下： * 0: "name: Study subSection: Education" 1："name: Classes subSection: Education" 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>

使用 .map() 在 jquery 中分组

group by in jquery with .map()

javascript

underscore.js

lodash