CODEWITHSUNDEEP
javascriptjqueryarrays
eternal
eternal

Reputation: 99

Putting objects into array with key and then displaying them

I have an array of objects, and I'm trying to group and display them like so:

Level A: BobM, MollyF

Level B: SueF, JoeN, JackF

Here's the jsFiddle: http://jsfiddle.net/PtNLL/4/

var list ={"PEOPLE": [
    {  "name": "Bob",   "level": "A",  "gender": "F"},
    {  "name": "Sue", "level": "B", "gender": "F"},
    {  "name": "Molly", "level": "A", "gender": "M"},
    {  "name": "Joe",  "level": "B", "gender": "N"},
    {  "name": "Jack", "level": "B",  "gender": "F"}
]};


var lvlList = new Array();

for(var i in list.PEOPLE){
     var key = list.PEOPLE[i].level;
    lvlList[key].push(list.PEOPLE[i]);
}

$('#dir2').append( "Here are the Level As");
for(var j in lvlList["A"]) { 
    $('#dir2').append( lvlList[j].name +lvlList[j].gender + "<br/>");
}

$('#dir2').append( "Here are the Level Bs");
for(var k in lvlList["B"]) { 
    $('#dir2').append( lvlList[k].name + lvlList[k].gender +  "<br/>");
}

Also, I am aware there is a group function for underscore, but I don't understand it and I could not get it working: http://jsfiddle.net/5J553/1/ if anyone thinks that is a better method.

Upvotes: 2

Views: 82

Answers (5)

Qwerty
Qwerty

Reputation: 31959

I wasn't able to run your code as you cannot push an item to a non array. I made it work using this:

var lvlList = [];

for(var i in list.PEOPLE){
    var key = list.PEOPLE[i].level;
    (key in lvlList) ? lvlList[key].push(list.PEOPLE[i]) : lvlList[key] = [list.PEOPLE[i],];
}


for (var key in lvlList.A) {
    console.log(lvlList.A[key].name, lvlList.A[key].gender);
}

for (var key in lvlList["B"]) {
    console.log(lvlList["B"][key].name, lvlList["B"][key].gender);
}

Now just substract the console.log for your jQuery.append and you are ready to go.

EDIT

Note that this "Array" will behave differently from ordinary arrays. To print it's members you can't simply write the name.. the array is empty. Nor you can use .forEach(). This screenshot is taken from Chrome console. (I like Chrome for console scripting the most.)

Chrome console

Upvotes: 2

PeterKA
PeterKA

Reputation: 24638

In your first demo you declared lvlList as an array but in it's usage you used it as both an array and an object; it should be declared as an object and used as such -- see my code and demo. I group the objects using JavaScript and display using jQuery.

You can use the JavaScript filter() array method like so:

var lvlList = {};
lvlList.A = list.PEOPLE.filter(function(obj) { return obj.level == 'A'; });
lvlList.B = list.PEOPLE.filter(function(obj) { return obj.level == 'B'; });

$('#dir2').append( "Here are the Level As<br>");
$.each(lvlList["A"],function(i,v) { 
    $('#dir2').append( v.name + v.gender + "<br/>");
});

$('#dir2').append( "Here are the Level Bs<br/>");
$.each(lvlList["B"], function(i,v) { 
    $('#dir2').append( v.name + v.gender +  "<br/>");
});

WORKING JS FIDDLE DEMO

Result

Here are the Level As 
BobF 
MollyM 
Here are the Level Bs 
SueF 
JoeN
JackF

Upvotes: 1

Yaroslav Admin
Yaroslav Admin

Reputation: 14535

Your code is fine. You need to add jQuery reference in your second jsFiddle.

var grp = _.groupBy(list.PEOPLE, function (person) {
    return person.level;
});

Here is a working example.

Upvotes: 1

Adjit
Adjit

Reputation: 10305

First... the way you call push() is wrong. It should be called like this : array.push(x)

You should look into using a struct in Javascript. That is truly the best part of this, is that it doesn't require jQuery

Function for creating a struct :

function makeStruct(names) {
  var names = names.split(' ');
  var count = names.length;
  function constructor() {
    for (var i = 0; i < count; i++) {
      this[names[i]] = arguments[i];
    }
  }
  return constructor;
}

Now, you have to create an instance of the structure...

var Person = makeStruct("name level gender");

Then you need to add people to your structure...

var people = [
                new Person('Bob', 'A', 'M'),
                new Person('Sue', 'B', 'F'),
                new Person('Molly', 'A', 'F'),
                new Person('Joe', 'B', 'N'),
                new Person('Jack', 'B', 'M')
             ];

Now to access just use a simple loop :

var i;
for(i = 0; i < people.length; i++){
    //access the elements of the struct -- Put your conditionals as needed
    console.log("Name : " + people[i].name + "; Level : " + people[i].level + "; Gender : " + people[i].gender);
}

As simple as that, just in the for loop you can put your conditionals... If people[i].level == "B" put in list B... etc.

Upvotes: 2

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You can create two divs and append then like this:

  $.each(list.PEOPLE,function(index,item){
    if(item.level === "A")
        $("#levelA").append(item.name+"<br/>")
    if(item.level === "B")
        $("#levelB").append(item.name+"<br/>");
})

FIDDLE DEMO

Upvotes: 0

Related Questions