Filter Json Using Checkboxes with AngularJS

Question

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

Can you clarify what your end data should look like? In other words, the question is not clear. What is the goal? Do you want the IDs that are not selected? — Dinesh Devkota
– Dinesh Devkota, Commented Sep 8, 2016 at 1:34
no , when i checkbox two or more ids , it shows the id along with it other information on the datajson like ( material , number_of_lobes ) and so on , like a compare page between the ids and it's values — Amr Ayoub
– Amr Ayoub, Commented Sep 8, 2016 at 1:44
The question is still not clear. You have been saying it shows the id along with other information? Where is it showing? OR Do you want another filtered JSON out of that JSON data based on the selected ids? — Dinesh Devkota
– Dinesh Devkota, Commented Sep 8, 2016 at 1:48
yes exactly , when i choose two ids for example , it suppose to shows other 2 values along with that chosen ids . — Amr Ayoub
– Amr Ayoub, Commented Sep 8, 2016 at 1:50
after select the id , i wanna be able to show other proprieties along with that id , for example like in data-json , when i select id 0 , i need to show (rotor_drawing_number":4.01591,,"material":"17-4 PH") from id 0 , and so on if i choose 2 or more ids . — Amr Ayoub
– Amr Ayoub, Commented Sep 8, 2016 at 1:54

Dinesh Devkota · Accepted Answer · 2016-09-08 03:08:30Z

1

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.

edited Sep 8, 2016 at 3:08

answered Sep 8, 2016 at 2:16

Dinesh Devkota

1,4172 gold badges18 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Amr Ayoub Over a year ago

Thanks a lot for your help , but it shows me the whole datajson like this i.imgur.com/mON5fCC.png , how can i only pick one or two

Dinesh Devkota Over a year ago

What do you mean by pick one or two? If you just need to pick one or two items from JSON you now need to modify that JSON after being filtered.

Amr Ayoub Over a year ago

I mean it return the whole json data , i just wanted to return item or two . how can i modify it to return for example contour_length":51.00, and "overall_length":55.00, instead of the all info

Amr Ayoub Over a year ago

I'm sorry i couldn't explain well , but something similar to this blog.sodhanalibrary.com/2015/12/…

Dinesh Devkota Over a year ago

Didn't it solve your issue? If yes please accept answer.

|

Collectives™ on Stack Overflow

Filter Json Using Checkboxes with AngularJS

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related