CODEWITHSUNDEEP
angularjs
Raghav
Raghav

Reputation: 1229

How to access name and id from an object within another object in select option in Angularjs

[
  {
    "pcategorys": [
      {
        "name": "abc",
        "id": 1,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "xyz",
        "id": 2,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "pqr",
        "id": 19,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "def",
        "id": 20,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      }
    ],
    "companystone": [],
    "company_name": "ABB Company",
    "company_code": "ABB",
    "active_status": 1,
    "delete_status": 0,
    "id": 10,
    "createdAt": null,
    "updatedAt": null
  },
  {
    "pcategorys": [
      {
        "name": "qwe",
        "id": 24,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "qwert",
        "id": 26,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "asdf",
        "id": 28,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      }
    ],
    "companystone": [],
    "company_name": "asdf Comapny",
    "company_code": "asdf",
    "active_status": 1,
    "delete_status": 0,
    "id": 11,
    "createdAt": null,
    "updatedAt": null
  }
]

Am trying to access the 'id' and 'name' within 'pcategorys' object and i want to filter the results based on the 'id' of outer object i.e. "id": 10 or "id": 11

Am tried below code but its not working

<select class="form-control" ng-model="selectedCategory" ng-options="item.pcategorys.id as item.pcategorys.name for item in pcategorys | filter id : selectedCompanyID "></select>

Can anyone help me..

Upvotes: 0

Views: 46

Answers (3)

Nikhilesh Shivarathri
Nikhilesh Shivarathri

Reputation: 1670

First try adding a filter on the outer div and then get the filteredObject, in the child select element get options from the object.

Note: This works as expected if there are no duplicateId's you're filtereing upon.

Try the below snippet. Hope it helps you! 

function sampleController($scope) {

$scope.mySampleData = [{
  "pcategorys": [{
    "name": "abc",
    "id": 1,
    "createdAt": null,
    "updatedAt": null,
    "subcategory": []
  }, {
    "name": "xyz",
    "id": 2,
    "createdAt": null,
    "updatedAt": null,
    "subcategory": []
  }, {
    "name": "pqr",
    "id": 19,
    "createdAt": null,
    "updatedAt": null,
    "subcategory": []
  }, {
    "name": "def",
    "id": 20,
    "createdAt": null,
    "updatedAt": null,
    "subcategory": []
  }],
  "companystone": [],
  "company_name": "ABB Company",
  "company_code": "ABB",
  "active_status": 1,
  "delete_status": 0,
  "id": 10,
  "createdAt": null,
  "updatedAt": null
}, {
  "pcategorys": [{
    "name": "qwe",
    "id": 24,
    "createdAt": null,
    "updatedAt": null,
    "subcategory": []
  }, {
    "name": "qwert",
    "id": 26,
    "createdAt": null,
    "updatedAt": null,
    "subcategory": []
  }, {
    "name": "asdf",
    "id": 28,
    "createdAt": null,
    "updatedAt": null,
    "subcategory": []
  }],
  "companystone": [],
  "company_name": "asdf Comapny",
  "company_code": "asdf",
  "active_status": 1,
  "delete_status": 0,
  "id": 11,
  "createdAt": null,
  "updatedAt": null
}];
  $scope.selectedCompanyID = 11;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <div ng-controller="sampleController">
    <div ng-repeat="categoryObj in mySampleData | filter : { 'id' : selectedCompanyID }">
   <select ng-model="selectedCategory" ng-options="item.id as item.name for item in categoryObj.pcategorys"></select>
</div>
  </div>
</body>

Upvotes: 0

Hadi
Hadi

Reputation: 17299

Try like this.

angular.module("todoApp", [])
 .controller("mainCtrl", function($scope){
   $scope.cats = [
  {
    "pcategorys": [
      {
        "name": "abc",
        "id": 1,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "xyz",
        "id": 2,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "pqr",
        "id": 19,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "def",
        "id": 20,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      }
    ],
    "companystone": [],
    "company_name": "ABB Company",
    "company_code": "ABB",
    "active_status": 1,
    "delete_status": 0,
    "id": 10,
    "createdAt": null,
    "updatedAt": null
  },
  {
    "pcategorys": [
      {
        "name": "qwe",
        "id": 24,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "qwert",
        "id": 26,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      },
      {
        "name": "asdf",
        "id": 28,
        "createdAt": null,
        "updatedAt": null,
        "subcategory": []
      }
    ],
    "companystone": [],
    "company_name": "asdf Comapny",
    "company_code": "asdf",
    "active_status": 1,
    "delete_status": 0,
    "id": 11,
    "createdAt": null,
    "updatedAt": null
  }
]
    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp" ng-controller="mainCtrl as keyVar" class="container">
 
  <select class="form-control" ng-model="filterCat" ng-options="cat.id for cat in cats"></select>
 <select class="form-control" ng-model="selectedCategory" ng-options="item.id as item.name for item in filterCat.pcategorys"></select>

</div>

Upvotes: 1

Mahesh shankhpal
Mahesh shankhpal

Reputation: 1

Try this:

<div ng-repeat="n in pcategorys | filter : { 'id' : selectedCompanyID }">
   <select ng-model="selectedCategory" ng-options="item.id as item.name for item in n.pcategorys"></select>
</div>

Upvotes: 0

Related Questions