Question:
Check if the months in column is existing to the departments using react

Summary: To check if the months in a column exist for each department in a dataset, you can use various data manipulation and analysis tools such as react or SQL queries if your data resides in a database. Below, I'll provide examples using both React and SQL.


Solution: 

const App = () => {

  const data = [

    {

      key: "Department 1",

      value: [

        { id: 1, month: "Dec", result: 4, year: 2022 },

        { id: 2, month: "Jan", result: 19, year: 2023 },

      ],

    },

    {

      key: "Department 2",

      value: [

        { id: 1, month: "Dec", result: 36, year: 2022 },

        { id: 2, month: "Jan", result: 28, year: 2023 },

      ],

    },

    {

      key: "Department 3",

      value: [

        { id: 1, month: "Dec", result: 8, year: 2022 },

        { id: 2, month: "Jan", result: 50, year: 2023 },

      ],

    },

    {

      key: "Department 4",

      value: [

        { id: 1, month: "Dec", result: 1, year: 2022 },

        { id: 2, month: "Jan", result: 34, year: 2023 },

      ],

    },

    {

      key: "Department 5",

      value: [{ id: 1, month: "Jan", result: 11, year: 2023 }],

    },

    {

      key: "Department 6",

      value: [

        { id: 1, month: "Dec", result: 2, year: 2022 },

        { id: 2, month: "Jan", result: 21, year: 2023 },

      ],

    },

    {

      key: "Department 7",

      value: [

        { id: 1, month: "Dec", result: 17, year: 2022 },

        { id: 2, month: "Jan", result: 72, year: 2023 },

      ],

    },

    {

      key: "Department 8",

      value: [

        { id: 1, month: "Dec", result: 38, year: 2022 },

        { id: 2, month: "Jan", result: 14, year: 2023 },

      ],

    },

    {

      key: "Department 9",

      value: [

        { id: 1, month: "Dec", result: 44, year: 2022 },

        { id: 2, month: "Jan", result: 132, year: 2023 },

      ],

    },

  ];


  // The header columns

  const cols = [

    {

      month: "Dec",

      year: 2022,

    },

    {

      month: "Jan",

      year: 2023,

    },

  ];


  const renderCell = (arr, col) => {

    const row = arr.find((a) => a.month === col.month && a.year === col.year);

    if (!row) {

      return <td>N/A</td>;

    }

    return <td>{row.result}</td>;

  };


  return (

    <table border="1">

      <tr>

        <td>Key</td>

        {cols.map((col) => (

          <td>{col.month} {col.year}</td>

        ))}

      </tr>

      {data.map((d) => (

        <tr>

          <td>{d.key}</td>

          {cols.map((col) => renderCell(d.value, col))}

        </tr>

      ))}

    </table>

  );

};


// Render it

ReactDOM.createRoot(document.getElementById("root")).render(<App />);


<div id="root"></div>

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

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


Using SQL:

Assuming your data resides in a SQL database, you can use SQL queries to achieve this. Below is an example query using SQLite syntax:


SELECT Department, GROUP_CONCAT(DISTINCT Month) AS Months

FROM YourTableName

GROUP BY Department;


Replace ‘YourTableName’ with the name of your table.


This query groups the data by the Department column and concatenates the distinct values of the Month column for each department. This will give you a result set where each row represents a department along with the list of months associated with it.


You can integrate this logic into your React application wherever needed, such as within a table rendering departments and months, or as part of a form validation process.


Answered by: >XH栩恒

Credit:> StackOverflow


Suggested blogs:

>How to manage the Text in the container in Django?

>Activating Virtual environment in visual studio code windows 11

>Fix webapp stops working issue in Django- Python webapp

>Creating a form in Django to upload a picture from website

>Sending Audio file from Django to Vue

>How to keep all query parameters intact when changing page in Django?

>Solved: TaskList View in Django


Submit
0 Answers