skip to Main Content

How to search/filter arrays within arrays in React? For example:

I have this data (videosData.js):

[
    {
        "id": 1,
        "title": "Video 1",
        "video_leght": "00:50:00",
        "date": "20.05.2010",
        "questions": [
            {
                "id": 1,
                "question": "Question 1 ",
                "url": "Link"
              },
              {
                "id": 2,
                "question": "Question 2",
                "url": "Link"
              },
              {
                "id": 3,
                "question": "Question 3",
                "url": "Link"
              }         
        ]
    },
    {
        "id": 2,
        "title": "Video 2",
        "video_leght": "01:00:00",
        "date": "14.07.2016",
        "questions":[
            {
                "id": 1,
                "question": "Question 1 ",
                "url": "Link"
              },
              {
                "id": 2,
                "question": "Question 2",
                "url": "Link"
              },
              {
                "id": 3,
                "question": "Question 3",
                "url": "Link"
              }        
        ]
    }
]

This is my complete code:

import React, { useState } from "react";
import Style from "./SearchResults.module.css";
import DataList from "../data/videosData";

function SearchResults() {
  const [search, setSearch] = useState("");

  return (
    <div className={Style.Body}>
      <div className={Style.Search_div}>
        <input
          className={Style.Textbox1}
          onChange={(e) => setSearch(e.target.value)}
        ></input>
        <button className={Style.Btn_Potrazi}>Trazi</button>
      </div>

      <div>
      {DataList.filter((item) => {
            return search.toLowerCase() === ""
              ? ""
              : item.title.toLowerCase().includes(search);
          })
          .map((item) => (
            <h2>{item.title}</h2>
          ))}
      </div>
    </div>
  );
}

export default SearchResults;

I managed to filter the "title" in the array but what I really need is filter out only the questions. So when typing in the search box a word it would filter and show only that question that contains that word…

I’m completely newbie to web development, I watched lots of YouTube videos but just couldn’t find a tutorial with an explanation in own words on how to solve this problem.

Thanks in advance!

2

Answers


  1. I would go with a memo for this as below.

    const filteredQuestions = useMemo(()=>{
      var filteredQues =[]
      vv.forEach((p,index) => {
        p.questions.forEach((eachQues, _i)=>{
            if(search==='' || eachQues.question.toLowerCase().includes(search.toLowerCase())){
                filteredQues.push(eachQues);
            }
          })
        
        });
        return filteredQues
    },[search]);
    

    Then use filteredQuestions in the render to render filtered questions. I can also convert the above one to a memoized react component and use that directly.

    Note: I haven’t added conditional checks here.

    Login or Signup to reply.
  2. UPDATE: Go to this link -> https://codesandbox.io/s/sweet-chaum-39px6u?file=/src/App.js for the example of returning an element within the filtered map.

    const questionFilter = [
        {
            "id": 1,
            "title": "Video 1",
            "video_leght": "00:50:00",
            "date": "20.05.2010",
            "questions": [
                {
                    "id": 1,
                    "question": "Question 1 ",
                    "url": "Link"
                  },
                  {
                    "id": 2,
                    "question": "Question 2",
                    "url": "Link"
                  },
                  {
                    "id": 3,
                    "question": "Question 3",
                    "url": "Link"
                  }         
            ]
        },
        {
            "id": 2,
            "title": "Video 2",
            "video_leght": "01:00:00",
            "date": "14.07.2016",
            "questions":[
                {
                    "id": 1,
                    "question": "Question 1 ",
                    "url": "Link"
                  },
                  {
                    "id": 2,
                    "question": "Question 2",
                    "url": "Link"
                  },
                  {
                    "id": 3,
                    "question": "Question 3",
                    "url": "Link"
                  }        
            ]
        }
    ]
    
    const result = questionFilter.map(item => 
        item.questions.filter(qitem => qitem.question.includes('Question 1'))
    )
    
    console.log(result)

    Here’s how it done.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search