目录网站 - 使用 JS 数组按字母顺序排列然后显示在单独的 div 中

Question

我正在尝试替换我们目前使用 Wix 的目录网站。每当我们必须添加或删除员工时，手动 re-sort/alphabetize 整个站点都是一场噩梦。

我希望做的是将所有内容存储在 JS/Json 文件中，如下所示：

var staffData = '[
  {
    "FirstName":"Alexis",
    "LastName":"Gannnnn",  
    "departmentName":"department",
    "positionName":"Graphic Designer",
    "locationName":"209G",
    "phoneNumber":"111-111-1111",
    "emailAddress":"first.last@uni.edu",
    "profilePicture" : "https://t4.ftcdn.net/jpg/02/60/03/61/360_F_260036118_AUYppgsODQeTCnbu0OXGNDXB8EVzpxKq.jpg"
  },
  {
    "FirstName":"Erin",
    "LastName":"Rannnn",  
    "departmentName":"department",
    "positionName":"Admin and Comm Manager",
    "locationName":"remote",
    "phoneNumber":"111-111-1111",
    "emailAddress":"first.last@uni.edu",
    "profilePicture" : "https://image.shutterstock.com/image-photo/pretty-smiling-joyfully-female-fair-260nw-776697943.jpg"
  },
  {
    "FirstName":"Brady",
    "LastName":"Bonnnn",  
    "departmentName":"department",
    "positionName":"Coordinator",
    "locationName":"209G",
    "phoneNumber":"111-111-1111",
    "emailAddress":"first.last@uni.edu",
    "profilePicture" : "https://images.stockfreeimages.com/2112/sfi226w/21126966.jpg"
  },
  {
    "FirstName":"Jeniffer",
    "LastName":"Linnnn",  
    "departmentName":"department",
    "positionName":"Coordinator",
    "locationName":"remote",
    "phoneNumber":"111-111-1111",
    "emailAddress":"first.last@uni.edu",
    "profilePicture" : "https://s3.envato.com/files/338574216/2655.jpg"
  }
]';

然后我想把它输出成这样的东西：

JS/Json工作一分钟了，有点生疏了

但我最大的主要 objective 是：

让它按名字的字母顺序排列。
像照片中那样显示（不是 table 格式）。

唯一不同的是，有50+工作人员，一次只需要显示6个，然后轮播滚动。

提前致谢！任何类型的建议或 direction/resource 将不胜感激 :)

Answer 1

这是一种按 FirstName.

按字母顺序对数组进行排序的方法

var staffData = [{
    "FirstName": "Alexis",
    "LastName": "Gannnnn",
    "departmentName": "department",
    "positionName": "Graphic Designer",
    "locationName": "209G",
    "phoneNumber": "111-111-1111",
    "emailAddress": "first.last@uni.edu",
    "profilePicture": "https://t4.ftcdn.net/jpg/02/60/03/61/360_F_260036118_AUYppgsODQeTCnbu0OXGNDXB8EVzpxKq.jpg"
  },
  {
    "FirstName": "Erin",
    "LastName": "Rannnn",
    "departmentName": "department",
    "positionName": "Admin and Comm Manager",
    "locationName": "remote",
    "phoneNumber": "111-111-1111",
    "emailAddress": "first.last@uni.edu",
    "profilePicture": "https://image.shutterstock.com/image-photo/pretty-smiling-joyfully-female-fair-260nw-776697943.jpg"
  },
  {
    "FirstName": "Brady",
    "LastName": "Bonnnn",
    "departmentName": "department",
    "positionName": "Coordinator",
    "locationName": "209G",
    "phoneNumber": "111-111-1111",
    "emailAddress": "first.last@uni.edu",
    "profilePicture": "https://images.stockfreeimages.com/2112/sfi226w/21126966.jpg"
  },
  {
    "FirstName": "Jeniffer",
    "LastName": "Linnnn",
    "departmentName": "department",
    "positionName": "Coordinator",
    "locationName": "remote",
    "phoneNumber": "111-111-1111",
    "emailAddress": "first.last@uni.edu",
    "profilePicture": "https://s3.envato.com/files/338574216/2655.jpg"
  }
];

console.log(staffData.sort((a, b) => {
  var nameA = a.FirstName.toLowerCase(),
    nameB = b.FirstName.toLowerCase();
  if (nameA < nameB) //sort string ascending
    return -1;
  if (nameA > nameB)
    return 1;
  return 0; //default return value (no sorting)
}));

要制作布局，您可以使用网格布局 (here or here)，并且有很多教程如何制作旋转木马。

Answer 2

您可以通过使用 Array.sort() 方法实现此目的，对于显示卡，您可以使用网格布局。

工作演示：

var staffData = [{
  "FirstName":"Alexis",
  "LastName":"Gannnnn",  
  "departmentName":"department",
  "positionName":"Graphic Designer",
  "locationName":"209G",
  "phoneNumber":"111-111-1111",
  "emailAddress":"first.last@uni.edu",
  "profilePicture" : "https://t4.ftcdn.net/jpg/02/60/03/61/360_F_260036118_AUYppgsODQeTCnbu0OXGNDXB8EVzpxKq.jpg"
}, {
  "FirstName":"Erin",
  "LastName":"Rannnn",  
  "departmentName":"department",
  "positionName":"Admin and Comm Manager",
  "locationName":"remote",
  "phoneNumber":"111-111-1111",
  "emailAddress":"first.last@uni.edu",
  "profilePicture" : "https://image.shutterstock.com/image-photo/pretty-smiling-joyfully-female-fair-260nw-776697943.jpg"
}, {
  "FirstName":"Brady",
  "LastName":"Bonnnn",  
  "departmentName":"department",
  "positionName":"Coordinator",
  "locationName":"209G",
  "phoneNumber":"111-111-1111",
  "emailAddress":"first.last@uni.edu",
  "profilePicture" : "https://images.stockfreeimages.com/2112/sfi226w/21126966.jpg"
}, {
  "FirstName":"Jeniffer",
  "LastName":"Linnnn",  
  "departmentName":"department",
  "positionName":"Coordinator",
  "locationName":"remote",
  "phoneNumber":"111-111-1111",
  "emailAddress":"first.last@uni.edu",
  "profilePicture" : "https://s3.envato.com/files/338574216/2655.jpg"
}];

// Sorting the staffData objects by FirstName in ascending order.
staffData.sort((a, b) => a.FirstName.toLowerCase() > b.FirstName.toLowerCase() ? 1 : -1);

['one', 'two', 'three', 'four'].forEach((elem, index) => {
    document.getElementById(elem).innerHTML = staffData[index].FirstName + '</br>' + staffData[index].departmentName + ' | ' + staffData[index].positionName 
});

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.card {
  border: 1px solid black;
}

<div class="wrapper">
  <div class="card" id="one"></div>
  <div class="card" id="two"></div>
  <div class="card" id="three"></div>
  <div class="card" id="four"></div>
</div>

目录网站 - 使用 JS 数组按字母顺序排列然后显示在单独的 div 中

Directory Website - Use JS array to alphabetize then display in separate divs

javascript

css

arrays

json

directory