How to filter two api json response using useeffect in react

First API josn

{
  "Category One": [
    {"link_id": 3, "Link": "a.com", "Title": "A TITLE"},
    {"link_id": 4, "Link": "b.com", "Title": "B TITLE"},
    {"link_id": 5, "Link": "c.com", "Title": "C TITLE"}
  ],
  "Category Two": [
    {"link_id": 6, "Link": "d.com", "Title": "D TITLE"},
    {"link_id": 7, "Link": "e.com", "Title": "E TITLE"}
  ]
}

Second API json

{"l_id": [4,5,7]}

Output:

Category One:

B TITLE - b.com
C TITLE - c.com
Category Two:

E TITLE - e.com

For filter json data using useEffect we can follow below steps

Category Json

{
  "Category One": [
    {"link_id": 3, "Link": "a.com", "Title": "A TITLE"},
    {"link_id": 4, "Link": "b.com", "Title": "B TITLE"},
    {"link_id": 5, "Link": "c.com", "Title": "C TITLE"}
  ],
  "Category Two": [
    {"link_id": 6, "Link": "d.com", "Title": "D TITLE"},
    {"link_id": 7, "Link": "e.com", "Title": "E TITLE"}
  ]
}

Filter Json

{"l_id": [4, 5, 7]}

Filter Data

import React, { useState, useEffect } from 'react';

const filterComponent = () => {
    const [filteredData, setFilteredData] = useState({});

    const data = {
        "Category One": [
            {"link_id": 3, "Link": "a.com", "Title": "A TITLE"},
            {"link_id": 4, "Link": "b.com", "Title": "B TITLE"},
            {"link_id": 5, "Link": "c.com", "Title": "C TITLE"}
        ],
        "Category Two": [
            {"link_id": 6, "Link": "d.com", "Title": "D TITLE"},
            {"link_id": 7, "Link": "e.com", "Title": "E TITLE"}
        ]
    };

    const filterCriteria = {"l_id": [4, 5, 7]};

    useEffect(() => {
        const groupedData = {};

        // Iterate category data
        Object.keys(data).forEach(category => {
            // Filter items based on link_id matching filterCriteria.l_id
            const filteredItems = data[category].filter(item =>
                filterCriteria.l_id.includes(item.link_id)
            );

            // groupedData under their category
            if (filteredItems.length > 0) {
                groupedData[category] = filteredItems;
            }
        });

        // Update state with the filtered data
        setFilteredData(groupedData);
    }, [data, filterCriteria]);

    return (
        <div>
            <h1>Filtered Data Grouped by Category</h1>
            {Object.keys(filteredData).map((category, index) => (
                <div key={index}>
                    <h2>{category}</h2>
                    <ul>
                        {filteredData[category].map((item, idx) => (
                            <li key={idx}>
                                {item.Title} - <a href={item.Link}>{item.Link}</a>
                            </li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
};

export default filterComponent;

Explanation:

a) Initialized the filteredData as an empty object with useState, Initialized will store data (filtered data)

b) For filtering and grouping the data useed useEffect hook when the component mounts or when filterCriteria change, groupedData object is created to store the results Inside useEffect.

c) Object.keys(data) is used to iterate the categories in the data object e.g.”Category One”, “Category Two”.

d) Category is added to the groupedData object If a category has matching.

e) The filtered data is rendered by iterating over filteredData.

Keep Learning 🙂