Javascript 从下拉列表中但从两个不同的角度数组中检索组合结果

我这里有个问题，需要一些指导。我有一个下拉列表，在这里我选择我的选择，它将从两个不同的角度数据中提取匹配结果。例如，我有两个角度范围，一个叫做

$scope.mSessions

，另一个叫做

$scope.cSessions

。每个数组都有不同的键，除了一个键共享同一类别，并根据我的选择使用我的

标记来提取公共数据。因此，我的

选项将有

红色水果

、

黄色水果

和

橙色水果

等类别，如果我选择

红色水果

，它将在

mSessions

和

cSessions

中遍历我的数组，然后拉出

“m_类别”：[“苹果”、“草莓”、“菠萝”

和

“category”：[{“RED”：[“YES”]}]

。我想我应该创建一个新数组，将两个数据合并成一个，然后进行字符串比较，或者通过选择一个下拉菜单访问两个不同的数据。我不知道最好的方法是什么。请帮助

这是我的代码和JSFIDLE

HTML

---

如果要根据选择筛选两个表，请尝试以下代码：

工作小提琴：

HTML:

---

如果要根据选择筛选两个表，请尝试以下代码：

工作小提琴：

HTML:

---

您可以

flatMap

将所有类别组合组合一起填充一个包含所有键排列的数组，但这似乎对您可能正在执行的操作没有帮助。有关如何执行此操作的示例，请参阅（尽管您可能希望在生产中使用性能库（如Lodash）中的

flatMap

和

uniq

实现）@miqid，谢谢你的输入。但是我不太熟悉

flatMap

和

uniq

方法，因为它们更多的是Java方法。我还更新了我的

$scope.mySelection

数组，因为我在dif.array中缺少了两个类别。请查看我更新的代码……还有，我可以用来实现这一点的JS方法吗？哟我仍然不清楚您的目标。您是否试图根据用户从

$scope.mySelection

中选择的内容，简单地过滤

$scope.mSessions

和

$scope.cSessions

的显示？或者，您是否试图根据其他数组的内容为

$scope.mySelection

生成项目？如果是后者，您需要某种方法（例如，通用连接键）将

m_category

或

category

关联到其各自的

$scope.mySelection

项。顺便说一句，这些方法一点也不特定于Java，它们在函数式编程中很常见。@miqid，我正在尝试根据公共catego筛选

$scope.mSessions

和

$scope.cSessions

的显示我创建的ry，如

“cat”：“红色水果”、“黄色水果”、“橙色水果”“

在

$scope.mySelection

中。我想既然

$scope.mSessions

和

$scope.cSessions

有两个不同的类别名称，但需要有相同的类别才能过滤掉我的结果，我决定创建一个新类别以某种方式过滤掉它们。这有意义吗？如果我选择

黄色水果”

从

中，它将只显示

香蕉“，”菠萝“

和

黄色”

来自两个dif。tables@miqid，我感到困惑的是，因为我有两个dif.ng重复，它们是从两个dif.数据中提取的，比如

$scope.mSessions和$scope.cSessions

，我不知道如何通过

选项过滤结果，该选项在这两个地方都有一个共同的类别。您可以将所有的使用类别组合来填充一个包含所有键排列的数组，但这似乎对您可能正在执行的操作没有帮助。有关如何执行此操作的示例，请参见（尽管您可能希望使用生产中的Lodash等性能库中的

flatMap

和

uniq

实现）@miqid，谢谢你的输入。但是我不太熟悉

flatMap

和

uniq

方法，因为它们更多的是Java方法。我还更新了我的

$scope.mySelection

数组，因为我在dif.array中缺少了两个类别。请查看我更新的代码……还有，我可以用来实现这一点的JS方法吗？哟我仍然不清楚您的目标。您是否试图根据用户从

$scope.mySelection

中选择的内容，简单地过滤

$scope.mSessions

和

$scope.cSessions

的显示？或者，您是否试图根据其他数组的内容为

$scope.mySelection

生成项目？如果是后者，您需要某种方法（例如，通用连接键）将

m_category

或

category

关联到其各自的

$scope.mySelection

项。顺便说一句，这些方法一点也不特定于Java，它们在函数式编程中很常见。@miqid，我正在尝试根据公共catego筛选

$scope.mSessions

和

$scope.cSessions

的显示我创建的ry，如

“cat”：“红色水果”、“黄色水果”、“橙色水果”

在

$scope.mySelection

中。我想既然

$scope.mSessions

和

$scope.cSessions

有两个不同的类别名称，但需要有相同的类别来过滤掉我的结果，我决定创建一个新类别以某种方式过滤掉它们。这有意义吗？如果我选择

“黄色水果”

从

中，它将仅从两个dif中显示

“香蕉”、“菠萝”

和

“黄色”

。tables@miqid，我感到困惑的是，我有两个dif.ng重复，它们是从两个dif.data中提取的，比如

$scope.mSessions a
<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>

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"]}]
  }];
});

<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>

$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;
    }