Question

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

数据如下： * 0：“名称：学习科目：教育” 1：“名称：班级小节：教育” 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>

使用.map（）在jquery中分组

1 个答案: