如何在javascript中对数组条目进行分组

I have this sample data and transformed it into an array of objects like the one below. This has two levels: Level1, and Level2.

我有这个示例数据并将其转换为如下所示的对象数组。这有两个级别:Level1和Level2。

var array = [{
  "Level1": "Assigned to",
  "Level2": "Assigned To 1"
}, {
  "Level1": "Assigned to",
  "Level2": "Assigned To 2"
}, {
  "Level1": "Assigned to",
  "Level2": "Assigned To 3"
}, {
  "Level1": "Location1",
  "Level2": "SubLocation 1"
}, {
  "Level1": "Location1",
  "Level2": "SubLocation 2"
}];

I want to group it by their Key, and below it will be the name/values of the key. (see sample below). How will I fix this so that in my HTML it will be.

我想用它们的键对它进行分组,下面是密钥的名称/值。 (见下面的样本)。我将如何解决这个问题,以便在我的HTML中实现。

<div id="accordion">
  <h3>Assigned to</h3>
  <div>
    <p>Assigned To 1</p>
    <p>Assigned To 2</p>
    <p>Assigned To 3</p>
  </div>
  <h3>Location</h3>
  <div>
    <p>SubLocation 1</p>
    <p>SubLocation 2</p>
  </div>
</div>

2 个解决方案

#1

Using $.each() you can iterate through the array and get values, them manipulate them.

使用$ .each(),您可以迭代数组并获取值,然后操纵它们。

var json = [{
  "Level1": "Assigned to",
  "Level2": "Assigned To 1"
}, {
  "Level1": "Assigned to",
  "Level2": "Assigned To 2"
}, {
  "Level1": "Assigned to",
  "Level2": "Assigned To 3"
}, {
  "Level1": "Location1",
  "Level2": "SubLocation 1"
}, {
  "Level1": "Location1",
  "Level2": "SubLocation 2"
}];

var LevelArray = []
$.each(json, function(i, val){
  //console.log(val);
  var className =  val.Level1.replace(/\s/g);
  if($.inArray(className, LevelArray) == -1){
    LevelArray.push(className);
    var thisLevel = $('<div>',{
      'class' : className
    });
    thisLevel.append($('<h3>').text(val.Level1));
    var thisRow = $('<div>').append($('<p>').text(val.Level2));
    thisLevel.append(thisRow);
    $('body').append(thisLevel);
  } else {
    var thisLevel = $('.' + className )
    thisLevel.find('div').append($('<p>').text(val.Level2));
  
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

#2

Or you can just use _.groupBy
_ is Lodash library https://lodash.com/docs#groupBy. You can use it like this:

或者您可以使用_.groupBy _是Lodash库https://lodash.com/docs#groupBy。你可以像这样使用它:

var result = _.groupBy(array, function(elem){
      return elem.Level1;
   }
);

As a result you will get the object like this:

因此,您将获得如下对象:

{
   "Assigned to": [here array of all objects with Level1 === 'Assigned to'],
   "Location1": [here array of all objects with Level1 === 'Location1']
}

#1