Filter state array of data based on a unique key/name and push to a new Array

Question

Hopefully I will be able to explain it correctly. I have state => Array named courses, which on render stores the data from my API call.

Now if I loop through all of the items I get this (1 result out of 25):

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

Now, what I would like to, since more items have the same value course_werkgever I would like to extract this once, for each different course_werkgever type and push it to a new array.

So, that I can use it inside my html like this:

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

How can this be done?

`optionArray = [...new Set(sourceArray.map(obj => obj.course_werkgever))]` — R3tep, Jun 24 '19 at 12:11
@R3tep how can i push the new filtered data to a new array inside my state on render? — , Jun 24 '19 at 12:16
@R3tep i have a Arrow function which on render pushes the data to the array. this.setState({ werkgevers: [ ...new Set( this.state.opleidingen.map(q => q.opleiding_werkgever) ), ], }); But i get a empty array back. Thank you! — , Jun 24 '19 at 12:24
There is 2 `,` too much `this.setState({ werkgevers: [ ...new Set( this.state.opleidingen.map(q => q.opleiding_werkgever))]});` — R3tep, Jun 24 '19 at 12:27

Ankit Agarwal · Answer 1 · 2019-06-24T12:17:09.930

You can simply create a object with unique keys on course_werkgever to get that object only once and then fetch all the values of that object to get the result array. This is exactly similar to how set works:

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>

you are returning the entire object.. he needs only the value of course_werkgever in array a.g ["DeltaL", "FIA" ...] — Roy.B, Jun 24 '19 at 12:16

score 0 · Answer 2 · answered Jun 24 '19 at 12:19

0

You can do something like the below

    var arr = [{
    course_department: "Department A", 
    course_pathway: "BOL", 
    course_werkgever: "DeltaL" 
},{
    course_department: "Department A", 
    course_pathway: "BOL", 
    course_werkgever: "DeltaLA" 
}]
var newarr = [];
arr.forEach(function (item, index) {
  newarr.push(item.course_werkgever);
});

here the newarr will contain the values which you are expecting.

answered Jun 24 '19 at 12:19

Arun Prasat

340
1
9

1

But if there are the same value many times, you have this values into your array. The newarr need to contain uniq value. – R3tep Jun 24 '19 at 12:21
Please do like this var arrnew = []; arrnew = new Set(arr.map(a => a.course_werkgever)); It will give only unique values. – Arun Prasat Jun 24 '19 at 12:53
1

Not exactly, this give uniq value but not an array. You can use stread syntax to do it. Like `optionArray = [...new Set(sourceArray.map(obj => obj.course_werkgever))]` – R3tep Jun 24 '19 at 12:57

Filter state array of data based on a unique key/name and push to a new Array

2 Answers2