如何在jS上使用Categoy循环

Question

我有这样的数组

let students = [
            [{name: 'didi', class: 'one'}, {name: 'dudu', class: 'one'}],
            [{name: 'dede', class: 'two'}]
        ];

我想要这样的结果...expected result

我试着用下面的代码做循环...

let studentsCatg='';

        for (let i=0; i<students.length; i++){

            for (let j=0; j<students[i].length; j++){
                studentsCatg += '<ul style=\"border: 1px solid #ddd\">'
                    +'<li><p>'+students[i][j].name+'</p>'+students[i][j].class+'</p></li>'
                    +'</ul>'                
            }   

        }
        document.getElementById('list').innerHTML = studentsCatg;

但是像这样的结果..

The result

请帮帮忙。谢谢。

Answer 1

代码中的一些小变化：

let studentsCatg = '';
for (let i=0; i<students.length; i++){
    studentsCatg += '<ul style=\"border: 1px solid #ddd\">';
    for (let j=0; j<students[i].length; j++){
        studentsCatg += '<li><p>'+students[i][j].name+'</p>'+students[i][j].class+'</p></li>';                
    }   
    studentsCatg += '</ul>';
}
document.getElementById('list').innerHTML = studentsCatg;

Answer 2

​

(function()
{
  let studentLists = [
    [{name: 'didi', class: 'one'}, {name: 'dudu', class: 'one'}],
    [{name: 'dede', class: 'two'}]
  ];

  let container = document.getElementById("result");

  studentLists.map(function(studentList)
  {
    var ul = document.createElement('ul');
      ul.classList.add("class");
    
    studentList.map(function(object)
    {
      let li = document.createElement('li');
      li.innerHTML = object.name + " <br />" + object.class;
      ul.appendChild(li);
    });
    
    container.appendChild(ul);
  });


})();

.class{
  border: thin solid #dbdbdb;
}

<div id="result"><div>

​

Answer 3

这是根据class对它们进行分类的一种方法

​

let students = [
  [{name: 'didi', class: 'one'}, {name: 'dudu', class: 'one'}],
  [{name: 'dede', class: 'two'}]
];
        
let tempObj = {};

students.forEach( stArr=>{
  stArr.forEach( st=> 
    tempObj[st.class]?
    tempObj[st.class].push(st):
    tempObj[st.class] = [st]
  )
})

console.log(tempObj)

​