javascript - 使用 .map() 在 jquery 中分组

Question

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

数据如下: * 0:“名称:研究小节:教育” 1:“名称:类(class)小节:教育” 2:“名称:社会子部分:社会”

我希望它显示为

教育 1.学习 2.类

社交 1.社会

这是我目前无法运行的代码。我认为它需要一些调整才能正常工作。

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>