I am having an issue here and need some direction. I have a drop down where I choose my selection and it will pull up a matching result from two different Angular data. For example, I have two angular scopes, one is called $scope.mSessions and the other one is $scope.cSessions. Each array has different keys except for one where they share the same category and use my <select>tag to pull the common data depending on my selection. So my <select> option will have categories like RED FRUIT, YELLOW FRUIT and ORANGE FRUIT and if I choose RED FRUIT, it will go through my arrays in mSessions and cSessions then pull up "m_category": ["Apple", "Strawberry", "Pineapple"] and "category": [{"RED":["YES"]}]. I think I should either create a new array that will combine both data into one then do the string comparison or somehow access two different data by selecting one of the dropdowns. I can't figure out what's the best way to do this. Please help..!
Here's my code and JSFiddle first http://jsfiddle.net/missggnyc/ujj18nhv/29/
HTML
<div ng-app="myFruit">
<div ng-controller="fruitController">
<select ng-model="selectedAnswer" ng-options="c.cat for c in mySelection"></select> {{selectedAnswer}}
<table>
<tr>
<td>Session Name</td>
<td>M Category</td>
</tr>
<tr ng-repeat="m in mSessions">
<td>{{m.name}}</td>
<td>{{m.m_category}}</td>
</tr>
</table>
<table>
<tr>
<td>C Category</td>
</tr>
<tr ng-repeat="c in cSessions ">
<td>{{c.category}}</td>
</tr>
</table>
</div>
</div>
JS
var app = angular.module("myFruit", []);
app.controller("fruitController", function($scope) {
$scope.mySelection = [
{"cat": "RED FRUIT", "m_category": ["Apple", "Strawberry", "Pineapple"], "category": [{"RED":["YES"]}] },
{"cat": "YELLOW FRUIT", "m_category": ["Banana", "Pineapple"], "category": [{"YELLOW": ["YES"]}] },
{"cat": "ORANGE FRUIT", "m_category": ["Peach", "Nectarine"], "category": [{"ORANGE": ["YES"]}]}
];
$scope.mSessions = [{
"id": 2,
"name": "BD20",
"m_category": ["Apple", "Strawberry", "Pineapple"]
}, {
"id": 3,
"name": "CS03",
"m_category": ["Banana", "Pineapple"]
}, {
"id": 4,
"name": "MIS99",
"m_category": ["Peach", "Nectarine"]
}];
$scope.cSessions = [{
"number": 439,
"name": "FDFG",
"category": [{"RED":["YES"]}]
}, {
"number": 34,
"name": "CN",
"category": [{"YELLOW": ["YES"]}]
}, {
"number": 44,
"name": "PPP",
"category": [{"ORANGE": ["YES"]}]
}];
});
If you want to filter both the tables based on the selection then try the following code:
Working fiddle: https://jsfiddle.net/almamun1996/5Ln0d5Lb/14/
HTML:
<div ng-app="myFruit" ng-controller="fruitController">
<select ng-model="selectedFruit" ng-options="c.cat for c in mySelection" ng-change="myDropdownChange(selectedFruit)"></select> <br/>
Fruit Seleted: {{selectedFruit.cat}}
<table>
<tr>
<td>Session Name</td>
<td>M Category</td>
</tr>
<tr ng-repeat="m in mSessions">
<td>{{m.name}}</td>
<td>{{m.m_category}}</td>
</tr>
</table>
<table>
<tr>
<td>C Category</td>
</tr>
<tr ng-repeat="c in cSessions ">
<td>{{c.category}}</td>
</tr>
</table>
JS (Controller):
$scope.mySelection = [
{"cat": "RED FRUIT", "m_category": ["Apple", "Strawberry", "Pineapple"], "category": [{"RED": ["YES"]}]},
{"cat": "YELLOW FRUIT", "m_category": ["Banana", "Pineapple"], "category": [{"YELLOW": ["YES"]}]},
{"cat": "ORANGE FRUIT", "m_category": ["Peach", "Nectarine"], "category": [{"ORANGE": ["YES"]}]}
];
$scope.mSessions = [{
"id": 2,
"name": "BD20",
"m_category": ["Apple", "Strawberry", "Pineapple"]
}, {
"id": 3,
"name": "CS03",
"m_category": ["Banana", "Pineapple"]
}, {
"id": 4,
"name": "MIS99",
"m_category": ["Peach", "Nectarine"]
}
];
$scope.cSessions = [{
"number": 439,
"name": "FDFG",
"category": [{"RED": ["YES"]}]
}, {
"number": 34,
"name": "CN",
"category": [{"YELLOW": ["YES"]}]
}, {
"number": 44,
"name": "PPP",
"category": [{"ORANGE": ["YES"]}]
}
];
let m_myArray = $scope.mSessions;
let c_myArray = $scope.cSessions;
$scope.myDropdownChange = function(fruitSelected){
let m_myArray_inner = [];
let c_myArray_inner = [];
angular.forEach(m_myArray, function(value, key){
if(areArraysEqual(fruitSelected.m_category, value.m_category)){
m_myArray_inner = [{'name': value.name, 'm_category': value.m_category}]
}
})
angular.forEach(c_myArray, function(value, key){
if(areArraysEqual(fruitSelected.category, value.category)){
c_myArray_inner = [{'category': value.category}];
}
})
$scope.mSessions = m_myArray_inner
$scope.cSessions = c_myArray_inner;
}
function areArraysEqual( x, y ) {
// If both x and y are null or undefined and exactly the same
if ( x === y ) {
return true;
}
// If they are not strictly equal, they both need to be Objects
if ( ! ( x instanceof Object ) || ! ( y instanceof Object ) ) {
return false;
}
// They must have the exact same prototype chain, the closest we can do is
// test the constructor.
if ( x.constructor !== y.constructor ) {
return false;
}
for ( var p in x ) {
// Inherited properties were tested using x.constructor === y.constructor
if ( x.hasOwnProperty( p ) ) {
// Allows comparing x[ p ] and y[ p ] when set to undefined
if ( ! y.hasOwnProperty( p ) ) {
return false;
}
// If they have the same strict value or identity then they are equal
if ( x[ p ] === y[ p ] ) {
continue;
}
// Numbers, Strings, Functions, Booleans must be strictly equal
if ( typeof( x[ p ] ) !== "object" ) {
return false;
}
// Objects and Arrays must be tested recursively
if ( !areArraysEqual( x[ p ], y[ p ] ) ) {
return false;
}
}
}
for ( p in y ) {
// allows x[ p ] to be set to undefined
if ( y.hasOwnProperty( p ) && ! x.hasOwnProperty( p ) ) {
return false;
}
}
return true;
}