CODEWITHSUNDEEP
angularjsjsoncheckbox
Amr Ayoub
Amr Ayoub

Reputation: 73

Filter Json Using Checkboxes with AngularJS

I have been trying to solve this problem for days. i'm trying to filter Json data using checkbox , for example when i checkbox more than one id , it shows the rest that id data enter image description here

if user selects check boxes ( model numbers ),models will be filtered based on those check boxes selection

    controller('compareModelsCtrl',['$scope','$http', '$state' ,'$location',
    function($scope, $http, $state,$location, filterFilter) {
    $http.get('js/data.json').success(function(data){
    $scope.models = data;
    $scope.whichmodel = $state.params.modelId;
 $scope.order = {}; 

  $scope.format=function(){
  $scope.modifiedOrder=[];
   angular.forEach($scope.order, function(value, key) {
    if(value){
      $scope.modifiedOrder.push(parseInt(key));
    }
});


   <ion-checkbox ng-repeat="model in models | filter:query" ng-model="order[model.id]"  ng-change="format()">{{model.model_number}}</ion-checkbox>
          </ion-item>
          current order : {{modifiedOrder}}

DataJson

{
    "id":"0",
    "model_number":"BT168562.3",
    "rotor_drawing_number":4.01591,
    "material":"17-4 PH",
    "number_of_lobes":"5/6",
    "contour_length":51.00,
    "overall_length":55.00,
    "major_dia_in":1.063,
    "minor_dia_in":0.761,
    "rotor_head_dia_in":1.000,
    "thread_form":"N/A",
    "rotor_weight_lbs":11,
    "rotor_ecc":0.0755,
    "compatibility_weatherford":"",
    "compatibility_r_&_m":"TRUE",
    "compatibility_dyna_drill":"",
    "compatibility_mono_pv":"",
    "compatibility_roper":"",
    "stator_drawing_number":4.0162,
    "stator_length_in":60.00,
    "stator_contour_in":52.00,
    "cutback_top":4.00,
    "cutback_end":4.00,
    "tube_od":1.6875,
    "tube_id_ends":1.38,
    "tube_id_middle":1.38,
    "stator_number_of_stages":2.3,
    "stator_weight_lbs":14,
    "std_vector_nbr_55":0.913,
    "std_vector_nbr_hp":0.913,
    "fit_5_os_vector_nbr_55":0.000,
    "fit_5_os_vector_nbr_hp":0.000,
    "fit_1_0_os_vector_nbr_55":0.000,
    "fit_1_0_os_vector_nbr_hp":0.000,
    "fit_1_5_os_vector_nbr_55":0.000,
    "fit_1_5_os_vector_nbr_hp":0.000,
    "fit_2_0_os_vector_nbr_55":0,
    "fit_2_0_os_vector_nbr_hp":0.000,
    "2_us_vector_nbr_55":0,
    "2_us_vector_nbr_hp":0,
    "fit_1_5_us_vector_nbr_55":0,
    "fit_1_5_us_vector_nbr_hp":0,
    "fit_1_0_us_vector_nbr_55":0.903,
    "fit_1_0_us_vector_nbr_hp":0.903,
    "fit_5_us_vector_nbr_55":0,
    "fit_5_us_vector_nbr_hp":0,
    "fit_2_5_os_vector_nbr_55":0,
    "fit_2_5_os_vector_nbr_hp":0,
    "fit_3_os_vector_nbr_55":0,
    "fit_3_os_vector_nbr_hp":0,
    "tolerance":0.010,
    "nbr_thermal_expansion_coef":0.000190,
    "nbr_hp_thermal_expansion_coef":0.000190,
    "number_of_stages":2.3,
    "rev_per_gal":9.25,
    "torque_slope_ft_lb_psi":0.29,
    "pressure_per_stage_nbr_55_psi":150,
    "pressure_per_stage_nbr_hp_psi":225,
    "pressure_per_stage_nbr_hpx_psi":235,
    "plot_gpm_1":20,
    "plot_gpm_2":30,
    "plot_gpm_3":40,
    "slip_at_gpm_2":"15%",
    "":0,
    "flow_range_low":20,
    "flow_range_high":40,
    "speed_range_low":185,
    "speed_range_high":370,
    "off_bottom_pressure":31,
    "max_diff_pressure_nbr":345,
    "max_diff_pressure_nbr_hpx":541,
    "stall_diff_pressure_nbr":518,
    "stall_diff_pressure_nbr_hpx":851,
    "max_torque_nbr":100,
    "max_torque_nbr_hpx":157,
    "stall_torque_nbr":185,
    "},

    "id":"1",
    "model_number":"BT168565.0",
    "rotor_drawing_number":4.01530,
    "material":"17-4 PH",
    "number_of_lobes":"5/6",
    "contour_length":87.00,
    "overall_length":93.00,
    "major_dia_in":0.990,
    "minor_dia_in":0.714,
    "rotor_head_dia_in":1.100,
    "thread_form":"N/A",
    "rotor_weight_lbs":16,
    "rotor_ecc":0.0690,
    "compatibility_weatherford":"",
    "compatibility_r_&_m":"TRUE",
    "compatibility_dyna_drill":"",
    "compatibility_mono_pv":"",
    "compatibility_roper":"TRUE",
    "stator_drawing_number":4.01637,
    "stator_length_in":99.00,
    "stator_contour_in":91.00,
    "cutback_top":4.00,
    "cutback_end":4.00,
    "tube_od":1.6875,
    "tube_id_ends":1.38,
    "tube_id_middle":1.38,
    "stator_number_of_stages":5.0,
    "stator_weight_lbs":27,
    "std_vector_nbr_55":0.853,
    "std_vector_nbr_hp":0.853,
    "fit_5_os_vector_nbr_55":0.000,
    "fit_5_os_vector_nbr_hp":0.000,
    "fit_1_0_os_vector_nbr_55":0.863,
    "fit_1_0_os_vector_nbr_hp":0.863,
    "fit_1_5_os_vector_nbr_55":0.000,
    "fit_1_5_os_vector_nbr_hp":0.000,
    "fit_2_0_os_vector_nbr_55":0,
    "fit_2_0_os_vector_nbr_hp":0,
    "2_us_vector_nbr_55":0,
    "2_us_vector_nbr_hp":0,
    "fit_1_5_us_vector_nbr_55":0,
    "fit_1_5_us_vector_nbr_hp":0,
    "fit_1_0_us_vector_nbr_55":0,
    "fit_1_0_us_vector_nbr_hp":0,
    "fit_5_us_vector_nbr_55":0,
    "fit_5_us_vector_nbr_hp":0,
    "fit_2_5_os_vector_nbr_55":0,
    "fit_2_5_os_vector_nbr_hp":0,
    "fit_3_os_vector_nbr_55":0,
    "fit_3_os_vector_nbr_hp":0,
    "tolerance":0.010,
    "nbr_thermal_expansion_coef":0.000190,
    "nbr_hp_thermal_expansion_coef":0.000190,
    "number_of_stages":5.0,
    "rev_per_gal":15.72,
    "torque_slope_ft_lb_psi":0.19,
    "pressure_per_stage_nbr_55_psi":150,
    "pressure_per_stage_nbr_hp_psi":225,
    "pressure_per_stage_nbr_hpx_psi":235,
    "plot_gpm_1":25,
    "plot_gpm_2":40,
    "plot_gpm_3":55,
    "slip_at_gpm_2":"15%",
    "":0,
    "flow_range_low":25,
    "flow_range_high":55,
    "speed_range_low":393,
    "speed_range_high":865,
    "off_bottom_pressure":67,
    "max_diff_pressure_nbr":750,
    "max_diff_pressure_nbr_hpx":1175,
    "stall_diff_pressure_nbr":1125,
    "stall_diff_pressure_nbr_hpx":1851,
    "max_torque_nbr":143,
    "max_torque_nbr_hpx":223,
    "stall_torque_nbr":393,
    "stall_torque_nbr_hpx":865
  }

Any help will be appreciated , Thanks

Upvotes: 1

Views: 190

Answers (1)

Dinesh Devkota
Dinesh Devkota

Reputation: 1417

First off make sure the JSON data or Models is as 

[{
    "id":"0",
    "model_number":"BT168562.3",
    "rotor_drawing_number":4.01591,
    "material":"17-4 PH",
    "number_of_lobes":"5/6",
    "contour_length":51.00,
    "overall_length":55.00,
    "major_dia_in":1.063,
    "minor_dia_in":0.761,
    "rotor_head_dia_in":1.000,
    "thread_form":"N/A",
    "rotor_weight_lbs":11,
    "rotor_ecc":0.0755,
    "compatibility_weatherford":"",
    "compatibility_r_&_m":"TRUE",
    "compatibility_dyna_drill":"",
    "compatibility_mono_pv":"",
    "compatibility_roper":"",
    "stator_drawing_number":4.0162,
    "stator_length_in":60.00,
    "stator_contour_in":52.00,
    "cutback_top":4.00,
    "cutback_end":4.00,
    "tube_od":1.6875,
    "tube_id_ends":1.38,
    "tube_id_middle":1.38,
    "stator_number_of_stages":2.3,
    "stator_weight_lbs":14,
    "std_vector_nbr_55":0.913,
    "std_vector_nbr_hp":0.913,
    "fit_5_os_vector_nbr_55":0.000,
    "fit_5_os_vector_nbr_hp":0.000,
    "fit_1_0_os_vector_nbr_55":0.000,
    "fit_1_0_os_vector_nbr_hp":0.000,
    "fit_1_5_os_vector_nbr_55":0.000,
    "fit_1_5_os_vector_nbr_hp":0.000,
    "fit_2_0_os_vector_nbr_55":0,
    "fit_2_0_os_vector_nbr_hp":0.000,
    "2_us_vector_nbr_55":0,
    "2_us_vector_nbr_hp":0,
    "fit_1_5_us_vector_nbr_55":0,
    "fit_1_5_us_vector_nbr_hp":0,
    "fit_1_0_us_vector_nbr_55":0.903,
    "fit_1_0_us_vector_nbr_hp":0.903,
    "fit_5_us_vector_nbr_55":0,
    "fit_5_us_vector_nbr_hp":0,
    "fit_2_5_os_vector_nbr_55":0,
    "fit_2_5_os_vector_nbr_hp":0,
    "fit_3_os_vector_nbr_55":0,
    "fit_3_os_vector_nbr_hp":0,
    "tolerance":0.010,
    "nbr_thermal_expansion_coef":0.000190,
    "nbr_hp_thermal_expansion_coef":0.000190,
    "number_of_stages":2.3,
    "rev_per_gal":9.25,
    "torque_slope_ft_lb_psi":0.29,
    "pressure_per_stage_nbr_55_psi":150,
    "pressure_per_stage_nbr_hp_psi":225,
    "pressure_per_stage_nbr_hpx_psi":235,
    "plot_gpm_1":20,
    "plot_gpm_2":30,
    "plot_gpm_3":40,
    "slip_at_gpm_2":"15%",
    "":0,
    "flow_range_low":20,
    "flow_range_high":40,
    "speed_range_low":185,
    "speed_range_high":370,
    "off_bottom_pressure":31,
    "max_diff_pressure_nbr":345,
    "max_diff_pressure_nbr_hpx":541,
    "stall_diff_pressure_nbr":518,
    "stall_diff_pressure_nbr_hpx":851,
    "max_torque_nbr":100,
    "max_torque_nbr_hpx":157,
    "stall_torque_nbr":185,
    },

    {"id":"1",
    "model_number":"BT168565.0",
    "rotor_drawing_number":4.01530,
    "material":"17-4 PH",
    "number_of_lobes":"5/6",
    "contour_length":87.00,
    "overall_length":93.00,
    "major_dia_in":0.990,
    "minor_dia_in":0.714,
    "rotor_head_dia_in":1.100,
    "thread_form":"N/A",
    "rotor_weight_lbs":16,
    "rotor_ecc":0.0690,
    "compatibility_weatherford":"",
    "compatibility_r_&_m":"TRUE",
    "compatibility_dyna_drill":"",
    "compatibility_mono_pv":"",
    "compatibility_roper":"TRUE",
    "stator_drawing_number":4.01637,
    "stator_length_in":99.00,
    "stator_contour_in":91.00,
    "cutback_top":4.00,
    "cutback_end":4.00,
    "tube_od":1.6875,
    "tube_id_ends":1.38,
    "tube_id_middle":1.38,
    "stator_number_of_stages":5.0,
    "stator_weight_lbs":27,
    "std_vector_nbr_55":0.853,
    "std_vector_nbr_hp":0.853,
    "fit_5_os_vector_nbr_55":0.000,
    "fit_5_os_vector_nbr_hp":0.000,
    "fit_1_0_os_vector_nbr_55":0.863,
    "fit_1_0_os_vector_nbr_hp":0.863,
    "fit_1_5_os_vector_nbr_55":0.000,
    "fit_1_5_os_vector_nbr_hp":0.000,
    "fit_2_0_os_vector_nbr_55":0,
    "fit_2_0_os_vector_nbr_hp":0,
    "2_us_vector_nbr_55":0,
    "2_us_vector_nbr_hp":0,
    "fit_1_5_us_vector_nbr_55":0,
    "fit_1_5_us_vector_nbr_hp":0,
    "fit_1_0_us_vector_nbr_55":0,
    "fit_1_0_us_vector_nbr_hp":0,
    "fit_5_us_vector_nbr_55":0,
    "fit_5_us_vector_nbr_hp":0,
    "fit_2_5_os_vector_nbr_55":0,
    "fit_2_5_os_vector_nbr_hp":0,
    "fit_3_os_vector_nbr_55":0,
    "fit_3_os_vector_nbr_hp":0,
    "tolerance":0.010,
    "nbr_thermal_expansion_coef":0.000190,
    "nbr_hp_thermal_expansion_coef":0.000190,
    "number_of_stages":5.0,
    "rev_per_gal":15.72,
    "torque_slope_ft_lb_psi":0.19,
    "pressure_per_stage_nbr_55_psi":150,
    "pressure_per_stage_nbr_hp_psi":225,
    "pressure_per_stage_nbr_hpx_psi":235,
    "plot_gpm_1":25,
    "plot_gpm_2":40,
    "plot_gpm_3":55,
    "slip_at_gpm_2":"15%",
    "":0,
    "flow_range_low":25,
    "flow_range_high":55,
    "speed_range_low":393,
    "speed_range_high":865,
    "off_bottom_pressure":67,
    "max_diff_pressure_nbr":750,
    "max_diff_pressure_nbr_hpx":1175,
    "stall_diff_pressure_nbr":1125,
    "stall_diff_pressure_nbr_hpx":1851,
    "max_torque_nbr":143,
    "max_torque_nbr_hpx":223,
    "stall_torque_nbr":393,
    "stall_torque_nbr_hpx":865
  }]

There was formating issue in your question.

Second, you need to use filter function. I have created a filtered object named as selectedObjects and modified the value in the format function and displayed in HTML as follows.

<ion-checkbox ng-repeat="model in models | filter:query" ng-model="order[model.id]"  ng-change="format()">{{model.model_number}}</ion-checkbox>
     <pre>
    current order : {{modifiedOrder}} <br>
    selected objects:{{selectedObjects}} </pre>

And JS

This implementation assumes that id is unique in JSON.

$scope.order = {};
        $scope.format = function() {
              $scope.modifiedOrder = [];
              $scope.selectedObjects = [];
              angular.forEach($scope.order, function(value, key) {
                    if (value) {
                          var filtered = $scope.models.filter(function(unit) {
                                return unit.id === key
                          });
                          $scope.selectedObjects.push({
                                   "overall_length":filtered[0].overall_length,
                                "contour_length": filtered[0].contour_length
                          });

                          $scope.modifiedOrder.push(parseInt(key));
                    }
              });
        }

Find sample implementation here. https://codepen.io/anon/pen/BLNJzB?editors=1010 Good luck.

Upvotes: 1

Related Questions