How to implement search in the array of object using javascript

manikandan
March 11, 2024
233 views
2 votes
3 Answers

Need to implement the search the value includes or not in the array of object, if exists only filter the particular object to display. Here is my solution

let data = [
        {
            "name": "Human Capital Management (HCM)",
            "description": "data entry with automatic data syncing capabilities.",
            "listingType": "integration",
            "connectors": [
                {
                    "name": "oracle",
                    "description": "our global platform",
                    "companyName": "Oracle",
                },
                {
                    "name": "greenhouse",
                    "description": "our global platform",
                    "companyName": "greenhouse",
                }
            ]
        },
        {
            "name": "Applicant tracking system (ATS)",
            "description": "data entry with automatic data syncing capabilities.",
            "listingType": "integration",
            "connectors": [
                {
                    "name": "HiBob",
                    "description": "our global platform",
                    "companyName": "HiBob",
                },
                {
                    "name": "greenhouse",
                    "description": "our global platform",
                    "companyName": "greenhouse",
                }
            ]
        },
    ]

Search value is

let searchVal = 'Greenhouse'

filtering function

let responseData = []
        
        await Promise.all(data.map(async (value)=> {
            if(value.name.includes(searchVal)) {
                responseData.push(value)
            }

            if(value.listingType.includes(searchVal)) {
                responseData.push(value)
            }

            if(Array.isArray(value.connectors)) {
                let connectors = await filterConnection(value.connectors, searchVal)
                if(Array.isArray(connectors) && connectors.length > 0) {
                    responseData.push({
                        ...value,
                        connectors
                    })
                }
            }
        }))

        return responseData

Need to implement the search function with more efficient code, kindly suggest the solution.

Tags: javascript

Answers

You could implement it like this:

let data = [
    {
        "name": "Human Capital Management (HCM)",
        "description": "data entry with automatic data syncing capabilities.",
        "listingType": "integration",
        "connectors": [
            {
                "name": "oracle",
                "description": "our global platform",
                "companyName": "Oracle",
            },
            {
                "name": "greenhouse",
                "description": "our global platform",
                "companyName": "greenhouse",
            }
        ]
    },
    {
        "name": "Applicant tracking system (ATS)",
        "description": "data entry with automatic data syncing capabilities.",
        "listingType": "integration",
        "connectors": [
            {
                "name": "HiBob",
                "description": "our global platform",
                "companyName": "HiBob",
            },
            {
                "name": "greenhouse",
                "description": "our global platform",
                "companyName": "greenhouse",
            }
        ]
    },
];

let searchVal = 'Greenhouse';

let responseData = data.filter(value => {
    // Check if any of the properties match the search value
    if (value.name.toLowerCase().includes(searchVal.toLowerCase())) {
        return true;
    }

    if (value.listingType.toLowerCase().includes(searchVal.toLowerCase())) {
        return true;
    }

    // Check if any connector matches the search value
    if (Array.isArray(value.connectors)) {
        let connectors = value.connectors.filter(connector =>
            connector.name.toLowerCase().includes(searchVal.toLowerCase()) ||
            connector.companyName.toLowerCase().includes(searchVal.toLowerCase())
        );

        if (connectors.length > 0) {
            value.connectors = connectors; // Update connectors with filtered array
            return true;
        }
    }

    return false;
});

console.log(responseData);

You can recursively construct a new data array with matching string properties in objects regardless of data structure.

Given code provided in the question it’s not clear whether for example if listingType matches, should be connectors filtered as well or not…

const hasString = (obj, str, regex = new RegExp(str, 'i')) => {
  
  if(Array.isArray(obj)) return obj.reduce((r, item) => {
    const out = hasString(item, str, regex);
    (Array.isArray(out) ? out.length : out) && r.push(out);
    return r;
  }, []);
  
  if(obj && typeof obj === 'object'){
    let matches = false;
    const out = {};
    for(const k in obj){
      const r = hasString(obj[k], str, regex);
      if(Array.isArray(r)){
        if(r.length) matches = true;
        out[k] = r;
      }else {
        if(r) matches = true;
        out[k] = obj[k];
      }
    }
    if(matches) return out;
  } else if(typeof obj === 'string' && regex.test(obj)){
    return true;
  }
}

const result = hasString(data, 'Greenhouse');

console.log(result);

<script>
let data = [
        {
            "name": "Human Capital Management (HCM)",
            "description": "data entry with automatic data syncing capabilities.",
            "listingType": "integration",
            "connectors": [
                {
                    "name": "oracle",
                    "description": "our global platform",
                    "companyName": "Oracle",
                },
                {
                    "name": "greenhouse",
                    "description": "our global platform",
                    "companyName": "greenhouse",
                }
            ]
        },
        {
            "name": "Applicant tracking system (ATS)",
            "description": "data entry with automatic data syncing capabilities.",
            "listingType": "integration",
            "connectors": [
                {
                    "name": "HiBob",
                    "description": "our global platform",
                    "companyName": "HiBob",
                },
                {
                    "name": "greenhouse",
                    "description": "our global platform",
                    "companyName": "greenhouse",
                }
            ]
        },
    ]
</script>

This is very simple function. I have included one more object in the data, which doesn’t have Greenhouse as a value for testing purposes. I have used map function along with forEach to check if the objects include the value ‘Greenhouse’ or not.

For each object in the data, first, all the values in the object, including that of the nested objects, are collected in an array and checked against the searchVal. If a match is found, the object is returned.

let searchVal = 'Greenhouse';

data.map(
  (obj) => {
    let d = [];
    let c = Object.values(obj);
    (c.forEach((ele) => {
      if (typeof(ele) == "object") {
        ele.forEach((x) => d.push(Object.values(x)));
      } else {
        d.push(ele);
      }
      if (d.flat().includes(searchVal.toLowerCase())) {
        console.log(obj)
      }
    }))
  }
)

<script>
let data = [{
    "name": "Human Capital Management (HCM)",
    "description": "data entry with automatic data syncing capabilities.",
    "listingType": "integration",
    "connectors": [{
        "name": "oracle",
        "description": "our global platform",
        "companyName": "Oracle",
      },
      {
        "name": "greenhouse",
        "description": "our global platform",
        "companyName": "greenhouse",
      }
    ]
  },
  {
    "name": "Applicant tracking system (ATS)",
    "description": "data entry with automatic data syncing capabilities.",
    "listingType": "integration",
    "connectors": [{
        "name": "HiBob",
        "description": "our global platform",
        "companyName": "HiBob",
      },
      {
        "name": "greenhouse",
        "description": "our global platform",
        "companyName": "greenhouse",
      }
    ]
  }, ,
  {
    "name": "VVVVVVVVVVVVVVVvvvvvv",
    "description": "data entry with automatic data syncing capabilities.",
    "listingType": "integration",
    "connectors": [{
        "name": "HiBob",
        "description": "our global platform",
        "companyName": "HiBob",
      },
      {
        "name": "house",
        "description": "our global platform",
        "companyName": "house",
      }
    ]
  },
]
</script>

Please signup or login to give your own answer.

Click here to cancel reply.