Explore an object to locate an element along with its parent

Question

Explore an object to locate an element along with its parent

Here is an example of an object:


    $scope.categories = [
    {
        value: 'One',
        id: 1,
        childs: [
          {
            value: 'Two',
            id : 2,
            childs: [
              {
                value: 'Three',
                id: 3
              },
              {
                value: 'Four',
                id: 4           
              }
            ]
          },
          {
            value: 'Five',
            id: 5
          },
          {
            value: 'Six',
            id: 6,
            childs: [
              { 
                value: 'Seven',
                id: 7
              },
              {
                value: 'Eight',
                id: 8
              }
            ]        
          }
        ]
      },
      {
        value: 'Nine',
        id: 9
      }
    ];

If I know the id, how can I get the element and its parents?

I am using AngularJS but it doesn't seem to be helping me with this task...

javascript angularjs

Answer 1

Answer №1

To streamline your array, utilize the following function:

function flatArray(o, parent) {
  let result = []
  o.forEach(child => {
    child.parent = parent
    result.push(child)
    if (child.childs) {
      Array.prototype.push.apply(result, flatArray(child.childs, child.id))
    }
  })

  return result
}

How to use it:

let categories = [
    {
        value: 'One',
        id: 1,
        childs: [
          {
            value: 'Two',
            id : 2,
            childs: [ /* ... */ ]
          },
          /* ... */
        ]
    ];

let flattenedCategories= flatArray(categories)

Check out the results:

Flat Array[9]: [
  {
     value: 'One',
     id: 1,
     childs: [/*...*/],
     parent: undefined
  }, {
     value: 'Two',
     id: 2,
     childs: [/*...*/],
     parent: 1
  }, 
  ...
]

This method makes it easy to locate the correct ID and its parent.

Answer 2

To streamline your array, utilize the following function:

function flatArray(o, parent) {
  let result = []
  o.forEach(child => {
    child.parent = parent
    result.push(child)
    if (child.childs) {
      Array.prototype.push.apply(result, flatArray(child.childs, child.id))
    }
  })

  return result
}

How to use it:

let categories = [
    {
        value: 'One',
        id: 1,
        childs: [
          {
            value: 'Two',
            id : 2,
            childs: [ /* ... */ ]
          },
          /* ... */
        ]
    ];

let flattenedCategories= flatArray(categories)

Check out the results:

Flat Array[9]: [
  {
     value: 'One',
     id: 1,
     childs: [/*...*/],
     parent: undefined
  }, {
     value: 'Two',
     id: 2,
     childs: [/*...*/],
     parent: 1
  }, 
  ...
]

This method makes it easy to locate the correct ID and its parent.

Answer 3

Answer №2

Like Icycool mentioned before, the key is to search through your collection recursively. While it's recommended that you try to solve it on your own, here's a quick solution provided in the code snippet below:

function find(id, children) {
  for (let child of children) {
    if (child.id === id) {
      return [child.id];
    } else if (child.childs && child.childs.length) {
      const result = this.find(id, child.childs);
      if (result.length) {
        return [...result, child.id];
      }
    }
  }

  return [];
}

const categories = [
  {
    "value": "One",
    "id": 1,
    "childs": [
      {
        "value": "Two",
        "id": 2,
        "childs": [
          {
            "value": "Three",
            "id": 3
          },
          {
            "value": "Four",
            "id": 4
          }
        ]
      },
      {
        "value": "Five",
        "id": 5
      },
      {
        "value": "Six",
        "id": 6,
        "childs": [
          {
            "value": "Seven",
            "id": 7
          },
          {
            "value": "Eight",
            "id": 8
          }
        ]
      }
    ]
  },
  {
    "value": "Nine",
    "id": 9
  }
];

console.log(find(8, categories));

Answer 4

Like Icycool mentioned before, the key is to search through your collection recursively. While it's recommended that you try to solve it on your own, here's a quick solution provided in the code snippet below:

function find(id, children) {
  for (let child of children) {
    if (child.id === id) {
      return [child.id];
    } else if (child.childs && child.childs.length) {
      const result = this.find(id, child.childs);
      if (result.length) {
        return [...result, child.id];
      }
    }
  }

  return [];
}

const categories = [
  {
    "value": "One",
    "id": 1,
    "childs": [
      {
        "value": "Two",
        "id": 2,
        "childs": [
          {
            "value": "Three",
            "id": 3
          },
          {
            "value": "Four",
            "id": 4
          }
        ]
      },
      {
        "value": "Five",
        "id": 5
      },
      {
        "value": "Six",
        "id": 6,
        "childs": [
          {
            "value": "Seven",
            "id": 7
          },
          {
            "value": "Eight",
            "id": 8
          }
        ]
      }
    ]
  },
  {
    "value": "Nine",
    "id": 9
  }
];

console.log(find(8, categories));

Explore an object to locate an element along with its parent

Answer №1

Answer №2

Similar questions

How can I detect Mongoose events through syntax?

Rotating an object in Three.js: Animate back and forth along two different azimuth angles

Creating a custom jQuery plugin for exporting data

Conceal content upon clicking with JavaScript

"Patience is key when waiting for the alert dialog response in Vuetify

Encountering difficulty retrieving information in an Angular application on an iPad mini device

Execute index.js code from index.html using NodeJS and Express

Navigate to a different subdomain and place a cookie on the newly redirected subdomain

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

What is the most effective way to loop through HTML elements using wildcards in Puppeteer to extract innerText?

Probability of an event occurring when represented as whole numbers in percentage form

The order in which JavaScript is being executed is being reversed

The next.js Head component that is imported from next/head is not functioning correctly when used on share pages

Creating a dynamic select input in React that displays a default value based on other user inputs

What is the best way to pass a function along with its state to utilize useContext in React

Display only one field and hide the other field using a jQuery IF/ELSE statement

Retrieve content from JSON post data

What is the best way to handle parsing JSON using external middleware after the removal of body parser in Express?

Using Jquery to Connect a Change Event to Child Elements

Transformation of looks post a refresh