javascript - 使用多维数组创建表 - 错误 : Cannot set property of undefined

Question

我正在尝试使用 javascript 和数组创建一个表。我正在对 SharePoint 进行客户端调用以返回 XML 响应，这为我提供了我的数据(用户/组)。使用这些调用，我得到了所有用户和所有组的数组。我需要遍历每个组并找到其中的用户，如果用户在该组中，则用 X 标记，否则留空。我无法正常工作。

这就是我想要做的:

//Build taxonomy

var allGroups = ["Users"];
var allUsers = [];
var taxonomy = [];

function initTax(){
  console.log("initiating taxonomy...")
  //get all users and add them to array
  $().SPServices({
    operation: "GetUserCollectionFromSite",
    async: true, 
    completefunc: function(xData,Status){
      $(xData.responseXML).find("User").each(function(){
        allUsers.push($(this).attr("userLoginName"));
      });
    }
  });

  //get all groups and add them to array
  $().SPServices({
    operation: "GetGroupCollectionFromSite",
    async: true,
    completefunc: function(xData,Status){
      $(xData.responseXML).find("Group").each(function(){
        allGroups.push($(this).attr("Name"));
      });
    }
  }); 
  buildTable();
}
var i, j;
function buildTable(){
  for (j=0;j<allGroups.length;i++){
    for (i=0;i<allUsers.length;i++){
      $().SPServices({
        operation: "GetGroupCollectionFromUser",
        userLoginName: allUsers[i],
        async: true,
        completefunc: function(xData, Status){
          var userInGroup = $(xData.responseXML).find(allGroups[j]);
            if(userInGroup){
              taxonomy[j][i] = "X";
            }else{
              taxonomy[j][i] = "";
            }
        }
      });
    }
  }  
}

XML:GetGroupCollectionFromUser 和 GetGroupCollectionFromSite

<GetGroupCollectionFromUser xmlns=
       "http://schemas.microsoft.com/sharepoint/soap/directory/">
       <Groups>
          <Group ID="3" Name="Group1" Description="Description" OwnerID="1" 
             OwnerIsUser="False" />
          <Group ID="15" Name="Group2" Description="Description" 
             OwnerID="12" OwnerIsUser="True" />
          <Group ID="16" Name="Group3" Description="Description" 
             OwnerID="7" OwnerIsUser="False" />
       </Groups>
    </GetGroupCollectionFromUser>

XML:GetUserCollectionFromSite

<GetUserCollectionFromSite xmlns=
   "http://schemas.microsoft.com/sharepoint/soap/directory/">
   <Users>
      <User ID="4" Sid="S-1-5-21-2127521184-1604012920-1887927527-
         34577" Name="User1_Display_Name" 
         LoginName="DOMAIN\User1_Alias" Email="User1_E-mail" 
         Notes="Notes" IsSiteAdmin="False" IsDomainGroup="False" />
      <User ID="5" Sid="S-1-5-21-2127521184-1604012920-1887927527-
         354403" Name="User2_Display_Name" 
         LoginName="DOMAIN\User2_Alias" Email="User2_E-mail" 
         Notes="Notes" IsSiteAdmin="False" IsDomainGroup="False" />
         .
         .
         .
   </Users>
</GetUserCollectionFromSite>

http://msdn.microsoft.com/en-us/library/ms774422(v=office.12).aspx

Answer 1

我决定将工作分为5个功能，其中3个功能模拟向服务器的请求并使用jquery处理xml。另外两个负责验证数据和构建表。 See this jsfiddle demo .

这是我的js代码:

/*
    Simulate get requesto to the server
*/
var getGroupCollectionFromUser = '<GetGroupCollectionFromUser xmlns='
  + '"http://schemas.microsoft.com/sharepoint/soap/directory/">'
  + '<Groups>'
  +'<Group ID="3" Name="Group1" Description="Description" OwnerID="1" OwnerIsUser="False" />'
  +'<Group ID="15" Name="Group2" Description="Description" OwnerID="12" OwnerIsUser="True" />'
  +'</Groups></GetGroupCollectionFromUser>';

var getGroupCollectionFromSite = '<GetGroupCollectionFromSite xmlns= '
  +'"http://schemas.microsoft.com/sharepoint/soap/directory/">'
  +'<Groups>'
  +'<Group ID="3" Name="Group1" Description="Description" OwnerID="1" OwnerIsUser="False" />'
  +'<Group ID="15" Name="Group2" Description="Description" OwnerID="12" OwnerIsUser="True" />'
  +'<Group ID="16" Name="Group3" Description="Description" OwnerID="7" OwnerIsUser="False" />'
  +'</Groups></GetGroupCollectionFromSite>';

var getUserCollectionFromSite = '<GetUserCollectionFromSite xmlns='
   +'"http://schemas.microsoft.com/sharepoint/soap/directory/">'
   +'<Users>'
   +'<User ID="4" Sid="S-1-5-21-2127521184-1604012920-1887927527-'
   +'34577" Name="User1_Display_Name" '
   +'LoginName="DOMAIN\User1_Alias" Email="User1_E-mail" '
   +' Notes="Notes" IsSiteAdmin="False" IsDomainGroup="False" />'
   +'<User ID="5" Sid="S-1-5-21-2127521184-1604012920-1887927527-'
   +'354403" Name="User2_Display_Name" '
   +'LoginName="DOMAIN\User2_Alias" Email="User2_E-mail" '
   +'Notes="Notes" IsSiteAdmin="False" IsDomainGroup="False" />'
   +'</Users></GetUserCollectionFromSite>';

var userGroupTable = {};
var users = [];
var groups = [];

function parseUserColl (){
    //simulate the get request to the server
    var dom = $(getUserCollectionFromSite);
    //process all user name
    dom.find('User').each(function(e){
        users.push($(this).attr('name'));
    });
} 

function parseGroupColl (){
    //simulate the get request to the server
    var dom = $(getGroupCollectionFromSite);
    //process all group name
    dom.find('Group').each(function(e){
        groups.push($(this).attr('name'));
    });
} 

function parseGroupCollFromUser (user){
    //simulate the get request to the server
    var dom = $(getGroupCollectionFromUser);
    var userGroups = [];
    //process all group name
    dom.find('Group[Name]').each(function(e){
        userGroups.push($(this).attr('Name'));
    });
    //return all the groups of the user
    return userGroups;
}


function processAll(){
    for(var i=0; i<users.length; i++){
        userGroupTable[users[i]] = {};
        var userGroups = parseGroupCollFromUser(users[i]);
        for(var j=0; j<groups.length; j++){
            //if the array userGroups contains the current group, the value must be true
            userGroupTable[users[i]][groups[j]] = userGroups.indexOf(groups[j]) > -1;
        }
    }
}

function buildTable (){
    //build header
    var header = "<tr><th>USERS</th>"
    for(var i=0; i<groups.length; i++){
        header += "<th>"+groups[i]+"</th>";
    }
    header += "</tr>";

    $("#table-data thead").append($(header));
    //build table body
    for(var user in userGroupTable){
        var row ="<tr><td>" + user + "</td>";
        for(var i=0; i<groups.length; i++){
            var groupName = groups[i];
            var $td = "<td>"+userGroupTable[user][groupName]+"</td>";
            row +=$td;
        }
        row += "</tr>";
        //append the data to the table
        $("#table-data tbody").append($(row));

    }
}

parseUserColl();
parseGroupColl();
processAll();

和我的 html 代码:

<button class="btn" onClick="buildTable()">Build Table</button>
<table class="table" id="table-data">
    <thead></thead>
    <tbody></tbody>
</table>

希望对您有所帮助。