Recursive loop through Javascript Object

Question

So I can see the problem, I just don't know how to fix it. I've been all over the interwebz!

I don't know how you're supposed to move to the next entry in the object tree when the condition doesn't match. At the moment I'm just overloading the call stack.

const myObject = {
  x: {
    y: {
      z: {
        e: 'ddfg'
      }
    }
  }
};
const param = Object.keys(myObject);

function traverse(target) {
  for (const key in target) {
    if (target[key] !== 'e') {
      traverse(target[key]);
    } else {
      console.log(key, target[key]);
    }
  }
}

traverse(param);

If you could lend a hand that would be great!

Nick · Accepted Answer · 2021-02-05 00:35:06Z

1

You have a couple of issues; you should be traversing over the object, not its keys, and you should be checking if key === 'e', not target[key] !== 'e'. Also, you should check that target[key] is an object before attempting to traverse it:

const myObject = {
  x: {
    y: {
      z: {
        e: 'ddfg'
      }
    }
  }
};

function traverse(target) {
  for (const key in target) {
    if (key !== 'e' && typeof target[key] === 'object') {
      traverse(target[key]);
    } else {
      console.log(key, target[key]);
    }
  }
}

traverse(myObject);

answered Feb 5, 2021 at 0:35

Nick

147k23 gold badges67 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lewis Morgans Over a year ago

Thank you for taking the time on that. That's certainly fixed the issue. It's a little confusing how it moves down through the object though. In the first instance x is the key, so when you call traverse and pass x in again shouldn't it go back to the start? I feel I am missing a key part of the knowledge behind it here I haven't been able to source online.

Nick Over a year ago

@LewisMorgans yes, in the first instance x is the key, but what is passed to the recursive call is myObject['x'], which is y: { z: { e: 'ddfg' } } }, so in the next for loop the value of key is y. In situations like this I always find it useful to drop in a few console.log around the place to see what the variables are doing...

CertainPerformance · Accepted Answer · 2021-02-05 00:36:32Z

1

You're iterating over the keys inside traverse, so don't extract an array of keys from the input beforehand.

Inside traverse, only make the recursive call if the nested value is an object (and not null):

'use strict';

const myObject = {
  x: {
    y: {
      z: {
        e: 'ddfg'
      }
    }
  }
};

function traverse(target) {
  for (const key in target) {
    const value = target[key];
    if (key === 'e') {
      console.log(value);
    } else if (typeof value === 'object' && value) {
      // Nested object found, recurse:
      traverse(value);
    }
  }
}

traverse(myObject);

answered Feb 5, 2021 at 0:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

Mulan · Accepted Answer · 2021-02-05 04:45:27Z

How about you make a generic traverse function?

function* traverse (t)
{ switch (t?.constructor)
  { case Object:
      for (const k in t)
        ( yield [k, t[k]]
        , yield *traverse(t[k])
        )
      break
    default:
      return
  }
}

This allows you to invert the control and decouple your filtering and and effect, keeping it separate from your traversal logic -

for (const [k, v] of traverse(myObject))
  if (k == "e")
    console.log(v)

"ddfg"

Verify the results in your browser below -

function* traverse (t)
{ switch (t?.constructor)
  { case Object:
      for (const k in t)
        ( yield [k, t[k]]
        , yield *traverse(t[k])
        )
      break
    default:
      return
  }
}

const myObject = {
  x: {
    y: {
      z: {
        e: 'ddfg'
      }
    }
  }
}

for (const [k, v] of traverse(myObject))
  if (k == "e")
    console.log(v)
    
// ddfg

vincent · Accepted Answer · 2021-02-06 01:49:26Z

1

Here is a solution using object-scan

// const objectScan = require('object-scan');

const data = { x: { y: { z: { e: 'ddfg' } } } };

const r = objectScan(['**'], {
  filterFn: ({ property }) => property === 'e',
  abort: true,
  rtn: 'entry'
})(data);

console.log(r);
// => [ [ 'x', 'y', 'z', 'e' ], 'ddfg' ]

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/[email protected]"></script>

Disclaimer: I'm the author of object-scan

answered Feb 6, 2021 at 1:49

vincent

2,1893 gold badges19 silver badges30 bronze badges

Collectives™ on Stack Overflow

Recursive loop through Javascript Object

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related