Как мне фильтровать многовыбранные значения во вложенных данных JSON

#javascript #arrays #reactjs #filter #filtering

#javascript #массивы #reactjs #Фильтр #фильтрация

Вопрос:

Пожалуйста, найдите демонстрационную ссылку. https://codesandbox.io/s/agitated-dubinsky-t0hcn?file=/src/nestead-table/index.js

Я не могу фильтровать многозначные выбранные элементы в данных JSON.

это данные, которые мы передаем.

    const jsonData = [
  {
    isMaster: false,
    selected: false,
    ID: 0,
    "Profile Type": "Line of Business",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 0.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating": "Not Assessed",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 0.2,
            "Control Classification": "Key",
            "Control Effectiveness Rating": "Partially Effective"
          },
          {
            isMaster: false,
            selected: false,
            ID: 0.21,
            "Control Classification": "Compensating",
            "Control Effectiveness Rating": "Partially Effective"
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 0.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Insignificant",
          Control: [
            {
              isMaster: false,
              selected: false,
              ID: 0.12,
              "Control Classification": "Arrangement",
              "Control Effectiveness Rating": "Partially Effective"
            },
            {
              isMaster: false,
              selected: false,
              ID: 0.13,
              "Control Classification": "Compensating",
              "Control Effectiveness Rating": "Effective"
            }
          ]
      }
    ]
  },
  {
    isMaster: false,
    selected: false,
    ID: 1,
    "Profile Type": "Business Unit (BU) / Support Unit (SU)",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 1.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating": "Low",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 1.2,
            "Control Classification": "key",
            "Control Effectiveness Rating": "Partially Effective"
          },
          {
            isMaster: false,
            selected: false,
            ID: 1.21,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Partially Effective"
          },
          {
            isMaster: false,
            selected: false,
            ID: 1.22,
            "Control Classification": "key",
            "Control Effectiveness Rating": "Effective"
          },
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 1.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Medium",
      }
    ]
  },
  {
    isMaster: false,
    selected: false,
    ID: 2,
    Name: "0940375C025200FAA38ED98A F9DE03D61ADAB727BA8C26D4",
    "Business Profile Owner": "Susheel",
    Folder: "CBA / Audit",
    "Profile Type": "Business Profile Instances",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 2.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating": "High",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 2.2,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Determined"
          },
          {
            isMaster: false,
            selected: false,
            ID: 2.21,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Tested"
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 2.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "very High",
      }
    ]
  },
  {
    isMaster: false,
    selected: false,
    ID: 3,
    "Profile Type": "Supplier",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 3.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Lindgren",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 3.2,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Tested"
          },
          {
            isMaster: false,
            selected: false,
            ID: 3.21,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Tested"
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 3.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Lindgren",
      }
    ]
  },
];
 

при выборе ввода с множественным выбором мы получим следующие данные вместе с именем столбца.

 const selection1 =  [{name: "Business Unit (BU) / Support Unit (SU)", type: "bp", column: "Profile Type"}];

const selection2 =  [{name: "Business Unit (BU) / Support Unit (SU)", type: "bp", column: "Profile Type"},
    {name: "Low", type: "risk", column: "Overall Control Effectiveness Rating and Residual Risk Rating"},
    {name: "Key", type: "control", column: "Control Classification"},
    {name: "Partially Effective", type: "control", column: "Control Effectiveness Rating"}];

  const selection3 = [ { name: "Medium", type: "Risk", column: "Overall Control Effectiveness Rating and Residual Risk Rating" } ] 
 

если используется selection1, то мы должны отобразить весь объект, который соответствует определенному имени из selection1, а столбец — «Тип профиля».

Все вышеперечисленные разделы будут динамическими. если в приведенных выше разделах типcontrol или risk, они являются подмассивами каждого объекта, и если type=’bp’, то это основной объект с идентификатором 0,1,2,3

если используется selection2, то выводом будет следующее.

 {
  isMaster: false,
  selected: false,
  ID: 1,
  "Profile Type": "Business Unit (BU) / Support Unit (SU)",
  Risk: [
    {
      isMaster: false,
      selected: false,
      ID: 1.1,
      "Overall Control Effectiveness Rating and Residual Risk Rating": "Low",
      Control: [
        {
          isMaster: false,
          selected: false,
          ID: 1.2,
          "Control Classification": "key",
          "Control Effectiveness Rating": "Partially Effective"
        }
      ]
    }
  ]
}
 

если используется раздел3, то выводом будет следующее.

    { 
    isMaster: false,
    selected: false,
    ID: 1, "Profile Type": "Business Unit (BU) / Support Unit (SU)",
    Risk: [{
    isMaster: false,
    selected: false,
    ID: 1.11,
    "Overall Control Effectiveness Rating and Residual Risk Rating": "Medium"
   }]
 } 
 
 const jsonData = [
  {
    isMaster: false,
    selected: false,
    ID: 0,
    "Profile Type": "Line of Business",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 0.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating": "Not Assessed",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 0.2,
            "Control Classification": "Key",
            "Control Effectiveness Rating": "Partially Effective"
          },
          {
            isMaster: false,
            selected: false,
            ID: 0.21,
            "Control Classification": "Compensating",
            "Control Effectiveness Rating": "Partially Effective"
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 0.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Insignificant",
          Control: [
            {
              isMaster: false,
              selected: false,
              ID: 0.12,
              "Control Classification": "Arrangement",
              "Control Effectiveness Rating": "Partially Effective"
            },
            {
              isMaster: false,
              selected: false,
              ID: 0.13,
              "Control Classification": "Compensating",
              "Control Effectiveness Rating": "Effective"
            }
          ]
      }
    ]
  },
  {
    isMaster: false,
    selected: false,
    ID: 1,
    "Profile Type": "Business Unit (BU) / Support Unit (SU)",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 1.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating": "Low",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 1.2,
            "Control Classification": "key",
            "Control Effectiveness Rating": "Partially Effective"
          },
          {
            isMaster: false,
            selected: false,
            ID: 1.21,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Partially Effective"
          },
          {
            isMaster: false,
            selected: false,
            ID: 1.22,
            "Control Classification": "key",
            "Control Effectiveness Rating": "Effective"
          },
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 1.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Medium",
      }
    ]
  },
  {
    isMaster: false,
    selected: false,
    ID: 2,
    Name: "0940375C025200FAA38ED98A F9DE03D61ADAB727BA8C26D4",
    "Business Profile Owner": "Susheel",
    Folder: "CBA / Audit",
    "Profile Type": "Business Profile Instances",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 2.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating": "High",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 2.2,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Determined"
          },
          {
            isMaster: false,
            selected: false,
            ID: 2.21,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Tested"
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 2.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "very High",
      }
    ]
  },
  {
    isMaster: false,
    selected: false,
    ID: 3,
    "Profile Type": "Supplier",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 3.1,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Lindgren",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 3.2,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Tested"
          },
          {
            isMaster: false,
            selected: false,
            ID: 3.21,
            "Control Classification": "Arrangement",
            "Control Effectiveness Rating": "Not Tested"
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 3.11,
        "Overall Control Effectiveness Rating and Residual Risk Rating":
          "Lindgren",
      }
    ]
  },
];

const selectArray1 =   [{name: "Business Unit (BU) / Support Unit (SU)", type: "bp", column: "Profile Type"},
{name: "Low", type: "risk", column: "Overall Control Effectiveness Rating and Residual Risk Rating"},
{name: "Key", type: "control", column: "Control Classification"},
{name: "Partially Effective", type: "control", column: "Control Effectiveness Rating"}];
    
  
  const finalData = jsonData.forEach(function (item, index) {
     selectArray1.forEach(function (item1, index) {
     if(item1.name === item[item1.column]) {
      console.log(item)
     }
    });
});

    
    
     
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>