How to search objects react.js javascript?

Question

Thanks for your time reading.

I need to sort countries by Language or Continent, the user selects the option he wants in the buttons.

countries is an array of objects of each country that contain:

languages is an array of objects, because each country can have more than one language
continent is an object with the continent name
Complete example(countries array content): https://github.com/gonzaloramosf/countries

If the user select for example continents and types in the input "es" all the results related whit content Asia listed together in a group and do not repeat the continent title in each one, same i need with languages.
This is my code:

const CountrySearch = ({countries}) => {
    const [searchTerm, setSearchTerm] = useState("");
    console.log(countries)
    return (
        <div className="search">
            <h1>Country Search</h1>
            <span> Some random text </span>
            <div className="searchResults">
                <input type="text" placeholder="Search country..." onChange={event => {
                    setSearchTerm(event.target.value)
                }}/>
                <div className="groupBy">
                    <h2> Group by: </h2>
                    <div>
                        <button> Continent </button>
                        <button> Language </button>
                    </div>
                </div>

                <div>
                    {countries.filter((val) => {
                        if (searchTerm === "") {
                            return ""
                        } else if (val.name.toLowerCase().includes(searchTerm.toLowerCase())){
                            return val
                        }
                    }).map((val, key) => {
                        return (
                            <div key={key}>
                                <h2> {val.continent.name} </h2> 
                                <div className="countryInfo">
                                    <div>
                                        <span>{val.emoji}</span>
                                        <h3> {val.name} </h3>
                                    </div>
                                    <p> Capital: {val.capital} </p>
                                    <p> Currency: {val.currency} </p>
                                </div>
                            </div>
                        )
                    })
                    }
                </div>
            </div>
        </div>
    )
}
export default CountrySearch;

Does this answer your question? [How can I group an array of objects by key?](https://stackoverflow.com/questions/40774697/how-can-i-group-an-array-of-objects-by-key) — gre_gor, May 12 '22 at 03:09
ty for answering, yes that helps but i dont know how to apply that when serching result in the array, any idea? — Gonzalo, May 12 '22 at 03:15

SSM · Accepted Answer · 2022-05-12T03:58:47.663

First filter the data and then group it by continent using reduce and then loop over the arrays and create the desired JSX.

You can refer the snippet below (type "s" in the input box):

const countries = [
  {
    name: "India",
    continent: { name: "Asia" },
    languages: [{ name: "Hindi" }, { name: "English" }, { name: "Marathi" }],
  },
  {
    name: "Sri Lanka",
    continent: { name: "Asia" },
    languages: [{ name: "Srilankan" }, { name: "Tamil" }],
  },
  {
    name: "Spain",
    continent: { name: "Europe" },
    languages: [{ name: "Spanish" }, { name: "English" }],
  },
  {
    name: "Slovakia",
    continent: { name: "Europe" },
    languages: [{ name: "English" }],
  },
];

function App() {
  const [searchTerm, setSearchTerm] = React.useState("");

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={({ target }) => setSearchTerm(target.value)}
      />
      {Object.entries(
        countries
          .filter((c) =>
            c.name.toLowerCase().includes(searchTerm.toLowerCase())
          )
          .reduce((res, c) => {
            if (!res[c.continent.name]) {
              res[c.continent.name] = [];
            }
            res[c.continent.name].push(c);
            return res;
          }, {})
      ).map(([continent, countries]) => (
        <ul key={continent}>
          <li>
            <div>{continent}</div>
            <ul>
              {countries.map(({ name, languages }) => (
                <li key={name}>
                  <div>{name}</div>
                  <ul>
                    {languages.map(({ name }) => (
                      <li key={name}>{name}</li>
                    ))}
                  </ul>
                </li>
              ))}
            </ul>
          </li>
        </ul>
      ))}
    </div>
  );
}

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

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Following is the portion of code from the above snippet that does the grouping:

Object.entries(
  countries
    .filter((c) => c.name.toLowerCase().includes(searchTerm.toLowerCase()))
    .reduce((res, c) => {
      if (!res[c.continent.name]) {
        res[c.continent.name] = [];
      }
      res[c.continent.name].push(c);
      return res;
    }, {})
);

for the array of languages that contains i some cases more than one language [{},{}] ?? — Gonzalo, May 12 '22 at 03:48
one more question, if the user select sort by language only filter by language similitudes from objects? — Gonzalo, May 12 '22 at 04:00
Sort? Or just filter? The snippet in my answer doesn't sort the countries. For sorting you'll have to add additional sorting logic as well. If you just want to filter then you can add additional state in your component to decide if you want to filter by country name or languages, but since languages is an array you'll have to handle that differently. It looks like this is a separate question, I would suggest give it a thorough try, use logs for debugging, and if you still face problems open up a new question. — SSM, May 12 '22 at 04:05
just filter for example language portuguese: brasil, portugal the same it is doing now with countries north america and list north america countries according to the input string. I don't know if I explain myself — Gonzalo, May 12 '22 at 04:10

How to search objects react.js javascript?

1 Answers1