How to filter array of array data based on certain conditions?-CodePudding

In a React project, I've data filled in a table which is in the format of array of array. For array of objects is quite easy to manipulate but difficult in array of array data. Here I want to filter based on specific condition and return it with new array. Please refer below code for clarity

Below is the data to be manipulated

const newArrayData = [
    [
      { id: 1 },
      false,
      "McDonalds",
      "Burger Store",
      "Mike John",
      "YYYY/MM",
      "Best Food Chain"
    ],
    [
      { id: 2 },
      false,
      "KFC",
      "Chicken Food Store",
      "Rock Wills",
      "YYYY/MM",
      "Best Food Chain Globally"
    ],
    [
      { id: 3 },
      false,
      "KFC",
      "Chicken Food Store",
      "Sam",
      "YYYY/MM",
      "Best Food Chain Globally"
    ],
    [
      { id: 4 },
      false,
      "KFC",
      "Chicken Food Store",
      "Amir",
      "YYYY/MM",
      "Best Food Chain Globally"
    ],
    [
      { id: 5 },
      false,
      "Starbucks",
      "Coffee Store",
      "Stephen",
      "YYYY/MM",
      "Best Coffee"
    ],
    [
      { id: 6 },
      false,
      "McDonals",
      "Burger Store",
      "Mark",
      "YYYY/MM",
      "Best Food Chain Globally"
    ]
  ];

Here I'm intergating into the Grid

// I want to filter out KFC and return new array and pass to grid
const dataNew = newArrayData.filter((data) => data === "KFC");

const store_grid_data = {
    data: dataNew,
    page_info: {
      total_pages: 5,
      current_page: 1
    }
  };
let GridConfig = {};
  let grid_data = {};

  GridConfig = TableConfig;
  grid_data = store_grid_data;

  const [gridConfigData, setGridConfigData] = useState(GridConfig);
  const [gridData, setGridData] = useState(grid_data);

  return (
    <>
      <Grid GridConfig={gridConfigData} GridData={gridData} />
    </>
  );

As you can see from above code, I have tried to filter with the logic above but it returns empty data. What is the best solution to tackle this? Please refer to the codesandbox: https://codesandbox.io/s/bold-boyd-2e16j6

CodePudding user response：

look at this code..

const dataNew = newArrayData.filter((data) =>{} );

the data in filter method actually is an array and U must iterate data to check it includes "kfc" or not. kile this:

 const dataNew = newArrayData.filter((data) =>{data.includes("KFC")} );

CodePudding user response：

I implement a workaround using for loop:

const Table = () => {
  const newArrayData = [
    [
      { id: 1 },
      false,
      "McDonalds",
      "Burger Store",
      "Mike John",
      "YYYY/MM",
      "Best Food Chain"
    ],
    [
      { id: 2 },
      false,
      "KFC",
      "Chicken Food Store",
      "Rock Wills",
      "YYYY/MM",
      "Best Food Chain Globally"
    ],
    [
      { id: 3 },
      false,
      "KFC",
      "Chicken Food Store",
      "Sam",
      "YYYY/MM",
      "Best Food Chain Globally"
    ],
    [
      { id: 4 },
      false,
      "KFC",
      "Chicken Food Store",
      "Amir",
      "YYYY/MM",
      "Best Food Chain Globally"
    ],
    [
      { id: 5 },
      false,
      "Starbucks",
      "Coffee Store",
      "Stephen",
      "YYYY/MM",
      "Best Coffee"
    ],
    [
      { id: 6 },
      false,
      "McDonals",
      "Burger Store",
      "Mark",
      "YYYY/MM",
      "Best Food Chain Globally"
    ]
  ];

  const dataNew = []
  for (let index in newArrayData) {
    if (newArrayData[index].includes('KFC')) dataNew.push(newArrayData[index])
  }