JSFiddle - React, Tailwind, and code Playground

Query an array of objects with filter and verbs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="selectWrapper"></div>
<div id="tableWrapper"></div>
<pre></pre>

JavaScript

var defaultProfile = {
  "date": 0,
  "numUsers": 0,
  "numSessions": 0,
  "avgDuration": 0,
  "avgUserCount": 0,
  "profile": {
    "Gender": {
      "Man": 0,
      "Woman": 0
    },
    "UB_Platform": {
      "ORBIS": 3,
      "PC": 1
    },
    "UB_Timezone": {
      "+0000": 1
    },
    "Age": {
      "11-30": 1
    },
    "Zodiac": {
      "Aries": 0,
      "Taurus": 0,
      "Gemini": 0,
      "Cancer": 0,
      "Leo": 0,
      "Virgo": 0,
      "Libra": 0,
      "Scorpio": 0,
      "Sagittarius": 0,
      "Capricorn": 0,
      "Aquarius": 0,
      "Pisces": 0
    }
  }
};

var summaries = [{
  "date": "2017-02-21T00:00:00Z",
  "numUsers": 1,
  "numSessions": 1,
  "avgDuration": 106,
  "avgUserCount": 1,
  "profile": {
    "Age": {
      "11-30": 1
    },
    "Zodiac": {
      "Virgo": 1
    }
  }
}, {
  "date": "2017-02-10T00:00:00Z",
  "numUsers": 1,
  "numSessions": 1,
  "avgDuration": 30,
  "avgUserCount": 1
}, {
  "date": "2017-02-21T00:00:00Z",
  "numUsers": 1,
  "numSessions": 1,
  "avgDuration": 106,
  "avgUserCount": 1,
  "profile": {
    "UB_Timezone": {
      "+0000": 1
    }
  }
}, {
  "date": "2017-02-14T00:00:00Z",
  "numUsers": 4,
  "numSessions": 4,
  "avgDuration": 30,
  "avgUserCount": 1
}, {
  "date": "2017-02-21T00:00:00Z",
  "numUsers": 4,
  "numSessions": 1,
  "avgDuration": 106,
  "avgUserCount": 4,
  "profile": {
    "Gender": {
      "Male": 2,
      "Female": 2
    },
    "UB_Platform": {
      "ORBIS": 3,
      "PC": 1
    }
  }
}];

/*  */
var selectWrapper = $('#selectWrapper');

$.each(defaultProfile.profile, function(key, value){
  
  // Create a drop down for each key in profile
  var select = $(`<select class="form-control" data-profile-key="${key}"><option></option></select>`);
  // Add an option to the drop down
  $.each(value, function(k, num){
    select.append($(`<option>${k}</option>`));
  });
  selectWrapper.append($(`<div class="col-xs-2">`).append(select));
});

// Future expansion, 
selectWrapper.on('change',...