Javascript Arrow function find using && and ||

Question

I have an array of objects and objects have properties.

The array looks like following:

[
  {
    "type": {
      "resolvedName": "FormRoot"
    },
    "isCanvas": true,
    "props": {},
    "displayName": "Form",
    "custom": {},
    "hidden": false,
    "nodes": [],
    "linkedNodes": {
      "form-body": "NODE_BODY"
    },
    "parent": "ROOT"
  },
  {
    "type": {
      "resolvedName": "DdGroup"
    },
    "isCanvas": true,
    "props": {
      "definitionId": "-2"
    },
    "displayName": "Group",
    "custom": {
      "target": "Group"
    },
    "hidden": false,
    "nodes": [
      "NODE_624_O2CI6D",
      "NODE_626_ZGPRNS",
      "NODE_628_8S3MOI",
      "NODE_629_8S3BLC",
      "NODE_630_8NWNVH",
      "NODE_631_XB8YML",
      "NODE_632_WDVQND",
      "NODE_633_XI5GWK",
      "NODE_634_GCWR1",
      "NODE_635_6JDVLL",
      "NODE_636_YSJ79I",
      "NODE_637_B2G1VS"
    ],
    "linkedNodes": {},
    "parent": "NODE_-1_DSO75T"
  },
  {
    "type": "div",
    "isCanvas": true,
    "props": {
      "className": "_3Op7nHDBF8ya__B1tPDfL_ e1nzbV5Ci4vpgTdE1tSJO"
    },
    "displayName": "de",
    "custom": {
      "target": "FormBody"
    },
    "hidden": false,
    "nodes": [
      "NODE_-1_DSO75T",
      "NODE_644_DNSKM7O"
    ],
    "linkedNodes": {},
    "parent": "NODE_FORM"
  }
]

I only want to select values when the target is either FormBody or Group

I tried with

const formBody = nodeValues.find((x) => x.custom && (x.custom.target === 'FormBody' || x.custom.target === 'Group'));

But, I am only getting FormBody elements.

What am I doing wrong?

Answer 1

find returns the first element in the array that passes the check.

If you want all elements that pass the check, use filter instead.

const nodeValues = [
  {
      "type": {
          "resolvedName": "FormRoot"
      },
      "isCanvas": true,
      "props": {
      },
      "displayName": "Form",
      "custom": {},
      "hidden": false,
      "nodes": [],
      "linkedNodes": {
          "form-body": "NODE_BODY"
      },
      "parent": "ROOT"
  },
  {
      "type": {
          "resolvedName": "DdGroup"
      },
      "isCanvas": true,
      "props": {
          "definitionId": "-2",
      },
      "displayName": "Group",
      "custom": {
          "target": "Group"
      },
      "hidden": false,
      "nodes": [
          "NODE_624_O2CI6D",
          "NODE_626_ZGPRNS",
          "NODE_628_8S3MOI",
          "NODE_629_8S3BLC",
          "NODE_630_8NWNVH",
          "NODE_631_XB8YML",
          "NODE_632_WDVQND",
          "NODE_633_XI5GWK",
          "NODE_634_GCWR1",
          "NODE_635_6JDVLL",
          "NODE_636_YSJ79I",
          "NODE_637_B2G1VS"
      ],
      "linkedNodes": {},
      "parent": "NODE_-1_DSO75T"
  },
  {
      "type": "div",
      "isCanvas": true,
      "props": {
          "className": "_3Op7nHDBF8ya__B1tPDfL_ e1nzbV5Ci4vpgTdE1tSJO"
      },
      "displayName": "de",
      "custom": {
          "target": "FormBody"
      },
      "hidden": false,
      "nodes": [
          "NODE_-1_DSO75T",
          "NODE_644_DNSKM7O"
      ],
      "linkedNodes": {},
      "parent": "NODE_FORM"
  }
];

const formBody = nodeValues.filter((x) => x.custom && (x.custom.target === 'FormBody' || x.custom.target === 'Group'));

console.log(formBody);