Javascript Question posted in
A very good W3school tutorial can be found here.

How to implement search in the array of object using javascript

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:

3

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search