Q:

Get full path of object in deeply nested object in JavaScript

My source array looks like this:
    arr =[
  {
    "dimensionId": 1,
    "dimensionName": "dimensionName1",
    "components": [
      {
        "componentId": 1,
        "componentName": "componentName1",
        "indicators": [
          {
            "indicatorId": 1,
            "indicatorName": "indicatorName1"
          },
          {...}
        ]
      },
       {...}
    ]
  },
  {...}
];

When I am trying to search the most deeply nested object by  'indicatorId' using .filter and .map  , it return the object like this: 
{
            "indicatorId": 1,
            "indicatorName": "indicatorName1"
}

What I need to do is keep track of the parent's properties as well when traversing through it's childrens. Desired output will be like this:
{
  "dimensionId": 1,
  "dimensionName": "dimensionName1",
  "componentId": 1,
  "componentName": "componentName2",
  "indicatorId": 1,
  "indicatorName": "indicatorName3"
}

Is there a way to do this recursively? 
 Edit: The id's are not unique throughout the array

A:

You can loop through and return when found.

arr =[
  {
    "dimensionId": 1,
    "dimensionName": "dimensionName1",
    "components": [
      {
        "componentId": 2,
        "componentName": "componentName2",
        "indicators": [
          {
            "indicatorId": 3,
            "indicatorName": "indicatorName3"
          },
     {
            "indicatorId": 3.1,
            "indicatorName": "indicatorName31"
          },
        ]
      }
    ]
  },
];

let out =  {}
arr.forEach(({dimensionId, dimensionName, components}) => {
 components.forEach(({indicators, componentId, componentName}) => {
  let found = indicators.find(({indicatorId}) => indicatorId === 3);
  if (found) {
   out = {dimensionId, dimensionName, componentId, componentName, ...found};
   return;
  }
 });
})

console.log(out)

