javascript - 根据唯一键/名称过滤状态数据数组并推送到新数组

Question

希望我能够正确解释它。我有 state => Array 命名类(class)，它在渲染时存储来 self 的 API 调用的数据。

现在，如果我遍历所有项目，我会得到这个(25 个结果中有 1 个结果):

{
  course_department: 'Department A',
  course_pathway: 'BOL',
  course_werkgever: 'DeltaL',
}

现在，我想做的是，因为更多的项目具有相同的值 course_werkgever 我想为每个不同的 course_werkgever 类型提取一次并将其推送到一个新数组。

所以，我可以像这样在我的 html 中使用它:

<select>
  <option value="">Sorteer by Course</option>
  <option value="DeltaL">DeltaL</option>
  <option value="DRZ">DRZ</option>
  <option value="FIA">FIA</option>
</select>

如何做到这一点？

Answer 1

您可以简单地在 course_werkgever 上创建一个具有唯一键的对象，只获取该对象一次，然后获取该对象的所有值以获取结果数组。这与 set 的工作方式完全相似:

var arr = [{
  course_department: "Department A",
  course_pathway: "BOL",
  course_werkgever: "DeltaL"
},
{
  course_department: "Department C",
  course_pathway: "FIA",
  course_werkgever: "FIA"
},
{
  course_department: "Department B",
  course_pathway: "DRZ",
  course_werkgever: "DRZ"
},
{
  course_department: "Department B",
  course_pathway: "DRZ",
  course_werkgever: "DRZ"
},
{
  course_department: "Department C",
  course_pathway: "FIA",
  course_werkgever: "FIA"
},
{
  course_department: "Department A",
  course_pathway: "BOL",
  course_werkgever: "DeltaL"
}
];

var tempObj = {};
arr.forEach((obj) => {
  if(!tempObj[obj.course_werkgever]) {
    tempObj[obj.course_werkgever] = obj.course_werkgever;
  }
});
// get the unique array
var res = Object.values(tempObj);
// create HTML select
res.forEach((course_werkgever) => {
  $('#select').append('<option value="'+course_werkgever+'">'+course_werkgever+'</option>');
});
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
<option value="">Sorteer by Course</option>
</select>