如何访问嵌套数组的值？

Question

我要从中检索属性的对象数组中有一个数组。 我已经在这里完成了 ，但是似乎很笨拙。 有没有更好的方法遍历每个房间中的每个StaffList数组？

window.onload = getInitials;
var data = {
    "room" : [
        {
            "id" : 1,
            "StaffList": [
                {                  
                  "inroom": true,                  
                  "initials": "MG"
                },
                {
                  "inroom": false,
                  "initials": "CT"
                },
                {
                  "inroom": true,
                  "initials": "MS"
                }
            ]
        },
        {
            "id" : 2,
            "StaffList": [
                {                  
                  "inroom": true,                  
                  "initials": "MG"
                },
                {
                  "inroom": false,
                  "initials": "CT"
                },
                {
                  "inroom": true,
                  "initials": "MS"
                },
                {
                  "inroom": true,
                  "initials": "MA"
                }
            ]
        }   

    ]
}

function getInitials() {
    var len = data.room.length;
    for(i = 0; i < len; i++) {
        var staffArray = data.room[i].StaffList;
        var room = data.room[i].id;
        if( staffArray != null ) {
            var allStaff = staffArray.filter(function(person) {
                if ( person.initials ) {
                    var inits = person.initials;
                    setInitials(room, inits);
                }
            });
        }
    }
}

function setInitials(room, initials) {
    //get element by ID
    //var staffContainer = $('#div' + room);
    var staffContainer = document.getElementById('div' + room);
    if(staffContainer != null) {
        //create new div to append
        var newDiv = document.createElement('div');
        newDiv.innerHTML = initials; 
        //append newly created <div>
        staffContainer.append(newDiv);
    }
}

Answer 1

您可以使用一些forEach ：

data.room.forEach(function(room) {
  room.StaffList.forEach(function(person) {
    setInitials(room.id, person.initials);
  });
});

在这里，我们首先遍历每个room ，然后遍历StaffList每个person 。 由于第二个forEach 位于第一个中，因此我们可以访问其范围（通过闭包，请参阅JavaScript闭包如何工作？ ）。 然后我们可以为setInitials使用新的参数room和person 。

注意如何不使用var语句。 当您不需要创建状态（变量）时，请不要这样做。 更少的状态通常也意味着更少的错误。 但是，在setInitials函数中，必须使用容器和新div的状态。

PS：关于您的代码的其他事情让我很烦。 您的可变room不是房间对象，而是ID。 这是误导！ 确保为正确的事物使用正确的名称。 在这里，如果要让状态存储房间的ID，则将其命名为roomId 。

---

您在评论中说，如果inroom值为true，则还希望在创建的div上添加一个类（顺便说一句，您应该使用CamelCase ）。 在这种情况下，您可以将其作为setInitials第三个参数传递，然后根据其值在函数主体中添加类。

Answer 2

没有关于如何排序的任何实际细节：仅将sort与排序函数一起使用，这就是它的设计目的（请注意sort() 就位 ，它修改了要排序的数组，而不仅仅是生成一个新数组数组作为函数输出）：

var data = ....;

// preprocess your data
data.rooms.forEach(function(room) {
  doSomethingToYour(room);
});

// sort stafflists per room, which we can only do
// after your preprocessing has completed.
data.rooms.forEach(function(room) {
  room.StaffList.sort(function(a,b) {
    a = a.initials;
    b = b.initials;
    return a<b? -1 : a>b ? 1 : 0;
  });
});

// optionally, we can sort the rooms now, if those
// relied on ordered StaffList. If not, we could have
// sorted them at any point.
data.rooms.sort(function(a,b) {
  return b.id - a.id;
}); 

Answer 3

几个建议：

使用嵌套循环检索嵌套数组值

这很简单：您的外循环将遍历所有房间，而内循环将遍历每个房间的员工。

在下面的示例代码中，我的外部循环是while循环，而内部循环是for ，但是您当然可以使用任何喜欢的方法来完成它。

function getInitials() {
  var len = data.room.length;
  while (len--) {
    var staffArray = data.room[len].StaffList;
    var room = data.room[len].id;
    for (var i = 0; i < staffArray.length; i++) {
      var person = staffArray[i];
      if (person.initials) {
        setInitials(room, person.initials);
      }
    }
  }
}

function setInitials(room, initials) {
  var staffContainer = document.getElementById("div" + room);
  if (staffContainer != null) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = initials;
    staffContainer.appendChild(newDiv);
  }
}

减少不必要的DOM查询

我建议缓存对所需div的引用数组，因此您可以只使用数组中div的索引来检索它。

我将通过在外部循环中填充div数组，然后将相关的div作为第一个参数传递给setInitials()

 function getInitials() { var len = data.room.length; var roomDivs = []; while (len--) { var staffArray = data.room[len].StaffList; var roomId = data.room[len].id; roomDivs[roomId] = document.getElementById("div" + roomId); for (var i = 0; i < staffArray.length; i++) { var person = staffArray[i]; if (person.initials) { setInitials(roomDivs[roomId], person.initials); } } } } function setInitials(staffContainer, initials) { if (staffContainer != null) { var newDiv = document.createElement("div"); newDiv.innerHTML = initials; staffContainer.appendChild(newDiv); } } var data = { "room": [{ "id": 1, "StaffList": [{ "inroom": true, "initials": "MG" }, { "inroom": false, "initials": "CT" }, { "inroom": true, "initials": "MS" }] }, { "id": 2, "StaffList": [{ "inroom": true, "initials": "MG" }, { "inroom": false, "initials": "CT" }, { "inroom": true, "initials": "MS" }, { "inroom": true, "initials": "MA" }] } ] } getInitials(); 

 #div1 { background-color: burlywood; } #div2 { background-color: crimson; } div { height: auto; width: 50px; padding: 3px; margin: 2px; } 

 <div id="div1"></div> <div id="div2"></div>