CODEWITHSUNDEEP
javascriptjqueryarrays
user6853602
user6853602

Reputation:

Javascript - Filter array results into dropdown list

I have an array as shown below where I want to filter the data and insert the filtered list into a dropdown list.

Here is the data:

{"people":[
    {
      "id":"100",
      "name":"name 1",
      "desc":"desc 1",
      "class": "a"
    },
    {
      "id":"192",
      "name":"name 2",
      "desc":"desc 2",
      "class": "b" 
    },
    {
      "id":"324",
      "name":"name 3",
      "desc":"desc 3",
      "class": "b" 
    },
    {
      "id":"324",
      "name":"name 4",
      "desc":"desc 4",
      "class": "a" 
    },
    {
      "id":"324",
      "name":"name 5",
      "desc":"desc 5",
      "class": "a"
    }
]}

What I now need to do is to add the array with "class" of "a" and then insert the id's of these into a dropdown list like:

$('#myselect').append($('<option>').text(value.id).attr('value', value.id));

How can I do this?

Upvotes: 0

Views: 1764

Answers (3)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18153

You can do like this with lodash library

//Filter with class = 'a'
var peopleWithClassA = _.filter(obj.people, { class: 'a' });

//Append option elem for each filtered people
_.forEach(peopleWithClassA, function(people) {
   $('#myselect').append($('<option>')
                 .text(people.id)
                 .attr('value', people.id));
});

Without lodash :

obj.people
.filter(function(p) {
    return p.class === 'a';
})
.forEach(function(p) {
    $('#myselect').append($('<option>').text(p.id).attr('value', p.id));
});

Upvotes: 0

Rajesh
Rajesh

Reputation: 24945

You can try something like this:

Logic

  • Get unique class names.
  • Loop on this unique values and filter data based on it
  • Create htmlString based on object and append it to necessary select

If you feel, adding selects in html is an over kill, you can generate them also based on data.

Sample

var data = {
  "people": [{
    "id": "100",
    "name": "name 1",
    "desc": "desc 1",
    "class": "a"
  }, {
    "id": "192",
    "name": "name 2",
    "desc": "desc 2",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 3",
    "desc": "desc 3",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 4",
    "desc": "desc 4",
    "class": "a"
  }, {
    "id": "324",
    "name": "name 5",
    "desc": "desc 5",
    "class": "a"
  }]
}

var uniqueClasses = {};
data.people.forEach(function(p) {
  uniqueClasses[p.class] = 1;
});

Object.keys(uniqueClasses).forEach(function(c) {
  var _html = data.people.filter(function(p) {
    return p.class === c
  }).map(function(p) {
    return "<option value='" + p.id + "'>" + p.name + "</option>"
  }).join("");
  $("#class_" + c).append(_html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="class_a"></select>
<select id="class_b"></select>

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

Here is an solution using Array.filter()

var obj = {
  "people": [{
    "id": "100",
    "name": "name 1",
    "desc": "desc 1",
    "class": "a"
  }, {
    "id": "192",
    "name": "name 2",
    "desc": "desc 2",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 3",
    "desc": "desc 3",
    "class": "b"
  }, {
    "id": "324",
    "name": "name 4",
    "desc": "desc 4",
    "class": "a"
  }, {
    "id": "324",
    "name": "name 5",
    "desc": "desc 5",
    "class": "a"
  }]
};

obj.people.filter(function(val) {
  if (val.class == "a") {
    $('#myselect').append($('<option>').text(val.id).attr('value', val.id));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
</select>

Upvotes: 1

Related Questions