I am currently facing an issue and I could use some guidance. My problem involves a dropdown menu where I make a selection, which then retrieves matching results from two separate Angular data arrays. In this scenario, I have two Angular scopes named $scope.mSessions and $scope.cSessions. While these arrays contain different keys, they share one common category. To retrieve the relevant data based on my selection, I utilize the <select> tag with options like RED FRUIT, YELLOW FRUIT, and ORANGE FRUIT. For instance, if I choose RED FRUIT, the system will search through both mSessions and cSessions arrays to display
"m_category": ["Apple", "Strawberry", "Pineapple"]"category": [{"RED":["YES"]}]. I am contemplating whether to create a new array merging both datasets for string comparison or find a way to access the individual datasets by selecting a dropdown option. I'm unsure about the best approach in this situation and would appreciate any help or suggestions!
To view my code and JSFiddle demonstration first visit: http://jsfiddle.net/missggnyc/ujj18nhv/29/
HTML Code Snippet:
<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>
Javascript (JS) Code Snippet:
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"]}]
}];
});