Display rows of chosen items based on the specific value of their sub objects using AngularJs

Question

Display rows of chosen items based on the specific value of their sub objects using AngularJs

The JSON provided below is being utilized It comprises an array of objects (branch) with sub-objects called "service". The goal is to display the branch name and its services, specifically those categorized as cream.

[
  {
    "b_sn": "1",
    "b_name": "Alambagh",
    "service": [
      {
        "i_sn": "1",
        "i_name": "Vanilla",
        "i_type": "cream",
        "i_detail": ""
      },
      {
        "i_sn": "2",
        "i_name": "Orange",
        "i_type": "candy",
        "i_detail": ""
      }
    ]
  },
  {
    "b_sn": "2",
    "b_name": "Aminabad",
    "service": [
      {
        "i_sn": "3",
        "i_name": "Butterscotch",
        "i_type": "cream",
        "i_detail": ""
      },
      {
        "i_sn": "4",
        "i_name": "Blueberry",
        "i_type": "cream",
        "i_detail": ""
      }
    ]
  },
  {
    "b_sn": "3",
    "b_name": "Hazratganj",
    "service": [
      {
        "i_sn": "1",
        "i_name": "Orange",
        "i_type": "candy",
        "i_detail": ""
      },
      {
        "i_sn": "2",
        "i_name": "Mango",
        "i_type": "candy",
        "i_detail": ""
      }
    ]
  }
]

The objective is to exhibit only the rows where i_type ="cream". If a branch (object) does not contain any sub-object labeled "cream", then its b_name should be excluded from the table.

Below is the HTML code snippet from the page:

<table>
  <tr>
    <th>SN.</th>
    <th>Branch Name</th>
    <th>Services</th>
  </tr>
  <tr data-ng-repeat="br in branches">
    <td>{{br.b_sn}}.</td>
    <td>{{br.b_name}}</td>
    <td>
      <table>
        <th></th>
        <tr data-ng-repeat="i in br.service">
          <td style="width:70%">{{i.i_sn}}. {{i.i_name}}</td>
          <td>{{i.detail}}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

If a branch does not offer any services of type 'cream', you can create a function to filter all the services that branch provides, and if no service with the type 'cream' is found, then simply return false so that branch is not displayed.

Similarly, when it comes to services, you can manually inspect each service to determine if it falls under the 'cream' category. This way, only branches with 'cream' services and 'cream' type services will be printed out.

Here's an example:

<table>
   <tr>
     <th>SN.</th>
     <th>Branch Name</th>
     <th>Services</th>
   </tr>
   <tr ng-if="creamCheck(br)" data-ng-repeat="br in branches">
     <td>{{br.b_sn}}.</td>
     <td>{{br.b_name}}</td>
     <td>
        <table>
           <th></th>
           <tr ng-if="i.i_type==='cream'" data-ng-repeat="i in br.service">
             <td style="width:70%">{{i.i_sn}}. {{i.i_name}}</td>
             <td>{{i.detail}}</td>
           </tr>
        </table>
     </td>
   </tr>
</table>

Don't forget to define the creamCheck function as well:

 $scope.creamCheck = function(branch)
    {
        var arr = ($filter('filter')(branch.service, { i_type: 'cream' }));
        if (arr.length>0) {
            return true;
        }
        else
            return false;
    }

This approach should help achieve the desired outcome.

Answer 2

If a branch does not offer any services of type 'cream', you can create a function to filter all the services that branch provides, and if no service with the type 'cream' is found, then simply return false so that branch is not displayed.

Similarly, when it comes to services, you can manually inspect each service to determine if it falls under the 'cream' category. This way, only branches with 'cream' services and 'cream' type services will be printed out.

Here's an example:

<table>
   <tr>
     <th>SN.</th>
     <th>Branch Name</th>
     <th>Services</th>
   </tr>
   <tr ng-if="creamCheck(br)" data-ng-repeat="br in branches">
     <td>{{br.b_sn}}.</td>
     <td>{{br.b_name}}</td>
     <td>
        <table>
           <th></th>
           <tr ng-if="i.i_type==='cream'" data-ng-repeat="i in br.service">
             <td style="width:70%">{{i.i_sn}}. {{i.i_name}}</td>
             <td>{{i.detail}}</td>
           </tr>
        </table>
     </td>
   </tr>
</table>

Don't forget to define the creamCheck function as well:

 $scope.creamCheck = function(branch)
    {
        var arr = ($filter('filter')(branch.service, { i_type: 'cream' }));
        if (arr.length>0) {
            return true;
        }
        else
            return false;
    }

This approach should help achieve the desired outcome.

Answer 3

Answer №2

Appreciate the assistance from everyone. I have successfully found the solution. Below is the code snippet for solving the mentioned problem.

    <div ng-app="myApp" ng-controller="myCtrl">

      <table class="table">
        <tr>
          <th>SN.</th>
          <th>Branch Name</th>
          <th>Services</th>
        </tr>
        <tr data-ng-repeat="br in branches | myFilter: {'key':key}">
          <td>{{br.b_sn}}.</td>
          <td>{{br.b_name}}</td>
          <td>
            <table>
              <tr data-ng-repeat="i in br.service|filter :{i_type:'cream'}">
                <td>{{i.i_sn}}. {{i.i_name}}</td>
                <td>{{i.detail}}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

    </div>

    <script>
      var app = angular.module('myApp', []);
      app.filter('myFilter', function() {
        return function(json, input) {
          console.log(json, input);
          var new_json = [];
          for(var i=0; i<json.length; i++){
            var flag = false;
            for(var j=0; j<json[i].service.length; j++){
              if(json[i].service[j].i_type == input.key){
                flag = true;
                  break;
              }
              else{
                flag = false;

              }
            }
            if(flag){
              new_json.push(json[i]);
            }
          }
          return new_json;
        };
      });
      app.controller('myCtrl', function($scope) {
        $scope.key = "cream";
        $scope.branches = [
          {
            "b_sn": "1",
            "b_name": "Alambagh",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Vanilla",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "2",
            "b_name": "Aminabad",
            "service": [
              {
                "i_sn": "3",
                "i_name": "Butterscotch",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "4",
                "i_name": "Blueberry",
                "i_type": "cream",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "3",
            "b_name": "Hazratganj",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Mango",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          }
        ];

      });
    </script>

Answer 4

Appreciate the assistance from everyone. I have successfully found the solution. Below is the code snippet for solving the mentioned problem.

    <div ng-app="myApp" ng-controller="myCtrl">

      <table class="table">
        <tr>
          <th>SN.</th>
          <th>Branch Name</th>
          <th>Services</th>
        </tr>
        <tr data-ng-repeat="br in branches | myFilter: {'key':key}">
          <td>{{br.b_sn}}.</td>
          <td>{{br.b_name}}</td>
          <td>
            <table>
              <tr data-ng-repeat="i in br.service|filter :{i_type:'cream'}">
                <td>{{i.i_sn}}. {{i.i_name}}</td>
                <td>{{i.detail}}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

    </div>

    <script>
      var app = angular.module('myApp', []);
      app.filter('myFilter', function() {
        return function(json, input) {
          console.log(json, input);
          var new_json = [];
          for(var i=0; i<json.length; i++){
            var flag = false;
            for(var j=0; j<json[i].service.length; j++){
              if(json[i].service[j].i_type == input.key){
                flag = true;
                  break;
              }
              else{
                flag = false;

              }
            }
            if(flag){
              new_json.push(json[i]);
            }
          }
          return new_json;
        };
      });
      app.controller('myCtrl', function($scope) {
        $scope.key = "cream";
        $scope.branches = [
          {
            "b_sn": "1",
            "b_name": "Alambagh",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Vanilla",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "2",
            "b_name": "Aminabad",
            "service": [
              {
                "i_sn": "3",
                "i_name": "Butterscotch",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "4",
                "i_name": "Blueberry",
                "i_type": "cream",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "3",
            "b_name": "Hazratganj",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Mango",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          }
        ];

      });
    </script>

Display rows of chosen items based on the specific value of their sub objects using AngularJs

Answer №1

Answer №2

Similar questions

The top choice for AngularJS: A trustworthy JSON viewer and editor module

Making a RESTful API call using JavaScript

I have put in a lot of effort, but unfortunately, the JavaScript validation is still

Creating, customizing, and assigning values to data attributes in Draft-js blocks: A complete guide

Refresh the data table using AJAX and JSON to update the information

The React-Redux application encountered an error: Key "coins" does not have a corresponding reducer

invoking a JavaScript function with onClick

Could components be responsible for data initialization delays?

What is the best way to assign a value to a property in a Controller or Global Variable using jQuery?

The functionality of create-react-app has been malfunctioning ever since the release of version 4.0.1. Is there a way to successfully remove the outdated version and

An elusive static image file goes unseen within the realm of node.js/express

What is the process for downloading a buffer file stored in memory using express.js?

Tips for adjusting the text color of input fields while scrolling down

Ensure that Google Tag Manager (GTM) delays the pageview until the SPA URL title is available

Having difficulty specifying numerical entries only

Learn the step-by-step process of cropping and zooming an image using the react-image-crop

Exploring parameterized routing in Node.js and Express

AngularJS - convey additional properties of the selected object during ng-change event

Encountered an error during the installation of the [email protected] script while running 'node build.js'

Guidelines for utilizing an image as a trigger for an if/else condition