How to filter and access child element from nested array of objects in Javascript-CodePudding

I have the following array of objects and I would like to get the innermost child attribute if it matches the outer condition:

My condition should be if objArray.displayValue matches "display2" and its types.displayValue matches "inner_display4" then return its value, which is 4.

objArray = [
  {
    "name": "abc",
    "displayValue": "display1",
    "types": [
      {
        "name": "name1",
        "displayValue": "inner_display1",
        "value": "1"
      },
      {
        "name": "name2",
        "displayValue": "inner_display2",
        "value": "2"
      },
      {
        "name": "name3",
        "displayValue": "inner_display3",
        "value": "3"
      }
    ]
  },
  {
    "name": "cdf",
    "displayValue": "display2",
    "types": [
      {
        "name": "name4",
        "displayValue": "inner_display4",
        "value": "4"
      },
      {
        "name": "name5",
        "displayValue": "inner_display5",
        "value": "5"
      },
      {
        "name": "name6",
        "displayValue": "inner_display6",
        "value": "6"
      }
    ]
  }
]

CodePudding user response：

You can try something like this

const find = (data, displayValue, innerDisplayValue) => 
  data.reduce((res, item) => {
    if(res || item.displayValue !== displayValue) return res
    const type =  item.types.find(t => t.displayValue === innerDisplayValue)
    return type? type.value: res
  }, undefined)


const objArray = [{
  "name": "abc",
  "displayValue": "display1",
  "types": [{
    "name": "name1",
    "displayValue": "inner_display1",
    "value": "1"
  }, {
    "name": "name2",
    "displayValue": "inner_display2",
    "value": "2"
  }, {
    "name": "name3",
    "displayValue": "inner_display3",
    "value": "3"
  }]
}, {
  "name": "cdf",
  "displayValue": "display2",
  "types": [{
    "name": "name4",
    "displayValue": "inner_display4",
    "value": "4"
  }, {
    "name": "name5",
    "displayValue": "inner_display5",
    "value": "5"
  }, {
    "name": "name6",
    "displayValue": "inner_display6",
    "value": "6"
  }]
}]

console.log(find(objArray, 'display2', 'inner_display4'))
console.log(find(objArray, 'display2', 'inner_display40'))

CodePudding user response：

You could try the following:

First find the object that has the correct displayValue and then filter the types to return the object you're looking for. Once you have the correct types object destructure the value.

The const displayValue is your result

Hope the code is a little bit clear :)

const findByDisplayValue = (dv) => objArray.find((obj) => obj.displayValue === dv);
const { types } = findByDisplayValue('display2');

const getType = (typeValue) => types.filter((type) => type.displayValue === typeValue);
const [{ displayValue }] = getType('inner_display4');