Question

我有一个对象数组，我正在尝试对它们进行分组和显示：

A级：BobM，MollyF

B级：SueF，JoeN，JackF

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/>");
}

此外，我知道下划线有一个群组功能，但我不理解它，我无法让它工作：http://jsfiddle.net/5J553/1/如果有人认为这是一个更好的方法。

Answer 1

首先......你拨打push()的方式是错误的。它应该像这样调用：array.push(x)

您应该在Javascript中使用struct。这确实是最好的部分，它不需要jQuery

创建结构的功能：

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

现在，您必须创建结构的实例...

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

然后你需要在你的结构中添加人......

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')
             ];

现在访问只使用一个简单的循环：

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);
}

就这么简单，只需在for循环中就可以设置条件......如果people[i].level == "B"放在列表B中......等等。

Answer 2

我无法运行您的代码，因为您无法push项目到非数组。我用它做了它的工作：

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);
}

现在只需减去console.log的{{1}}，即可开始使用。

修改

请注意这个＆＃34; jQuery.append＆＃34;将与普通数组的行为不同。要打印它的成员，你不能简单地写出名字......数组是空的。你也不能使用Array。此屏幕截图来自Chrome控制台。（我最喜欢Chrome for console脚本。）

Chrome console

Answer 3

你的代码很好。您需要在第二个jsFiddle中添加jQuery引用。

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

这是一个有效的example。

Answer 4

在您的第一个演示中，您将lvlList声明为数组，但在其用法中，您将其用作数组和对象;它应该被声明为一个对象并按原样使用 - 请参阅我的代码和演示。我使用JavaScript对对象进行分组并使用jQuery进行显示。

您可以使用JavaScript filter()数组方法，如下所示：

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

<强>结果

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

Answer 5

您可以创建两个div并按照以下方式追加：

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

使用键将对象放入数组，然后显示它们

5 个答案:

创建结构的功能：

修改