Return Value from Recursive Javascript Function Is Lost : <p>I have a JSON field object</p>

<pre><code>{path: 'field', children: []}
</code></pre>

<p>that can be nested like this:</p>

<pre><code>$scope.fields = [{path: 'field1', children:
                            [{path: 'field1.one', children: []},
                             {path: 'field1.two', children: []}]},
                        {path: 'field2', children: []}];
</code></pre>

<p>I am using the following function to iterate among the nested fields to retrieve the field with a specified path:</p>

<pre><code>var getField = function(thisPath, theseFields) {

        if (arguments.length == 1) {
            theseFields = $scope.fields;
        }
        angular.forEach(theseFields, function(field) {
            if (field.path == thisPath) {
                console.log('returning: '+JSON.stringify(field));
                return field;
            }
            if (field.children != null) {
                return getField(thisPath, field.children);
            }
        });
    };
</code></pre>

<p>This call </p>

<pre><code>console.log('field1.one: '+ JSON.stringify(getField('field1.one')));
</code></pre>

<p>generates the following logging in the browser console:</p>

<pre><code>returning: {"path":"field1.one","children":[]}
field1.one: undefined
</code></pre>

<p>The target field is found but never returned! </p>

<p>I get the same result with or without the <code>return</code> in the method call</p>

<pre><code>return getField(thisPath, field.children)
</code></pre>

<p>What am I missing? See working <a href="https://plnkr.co/edit/SjJtlgwRQwSMQKf1qVN1?p=preview" rel="nofollow noreferrer">plunkr</a>.</p>
