How to group array entries in javascript

Question

I have this sample data and transformed it into an array of objects like the one below. This has two levels: Level1, and 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.

<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>

So far I am trying to fix this code, but I am only getting the Level1 values var uniqueLevel1 = {}; $.each(json, function() { uniqueLevel1[this.Level1] = this.value; }); $.each(uniqueLevel1, function(l1) { $('#details').append('<h3>' + l1 + '</h3>'); }); — Aventus
– Aventus, Commented Sep 18, 2015 at 7:10

rrk · Accepted Answer · 2015-09-18 13:55:11Z

1

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

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>

edited Sep 18, 2015 at 13:55

answered Sep 18, 2015 at 7:10

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aventus Over a year ago

Hi Rejith, I have updated my question. the <p> should be inserted inside a <div> I will be using this with the accordion in jquery UI

duo_pendulum · Accepted Answer · 2015-09-18 08:17:57Z

0

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

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']
}

answered Sep 18, 2015 at 8:17

duo_pendulum

614 bronze badges

Collectives™ on Stack Overflow

How to group array entries in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related