Why I need to use 2 functions, but not only one [closed]

Question

I paste all of my code because it might have a connection with the function I am asking for.

I had some problems with my parseJSON() function and someone helped me to make it work. Now I don't know why its working.

Why I have to use 2 functions (parseJSON() and nested makeNav(navigation)), but not only one parseJSON(navigation) to make it work?
(and ofc to change the inner elements from makeNav to parseJSON).

Can someone explain why it works only that way for me?

Because I want to understand it, not just to do my exercise and go on.

    var new_json;
    $.get('navigation.json', function (json){
        new_json = json;
        parseJSON();

        var reload_page;
        var this_hash = window.location.hash;

        if( this_hash.length == 0 ){
            reload_page = "home";
        }else{
            reload_page = this_hash.replace('#', '');
        };

        loading(reload_page + '.html');
    });

    var cache = {};

    function loading(url){


        if( typeof(cache[url]) == 'undefined' ) {
            console.log( 'cache A does not exists' );

            container.load(url + ' .container>*', function(){

                cache[url] = container.html();          
            });
        }else {
            console.log( 'cache A exists' );

            container.html(cache[url]);
        };
    };

    $('#navigation li a, #logo a').live('click',function(){

        var url = $(this).attr('href');

        window.location.hash = url.replace('.html', '');

        loading(url);

        return false;
    });




    function parseJSON() {

        function makeNav(navigation) {
            var nav_html = '';
            console.log( navigation.length );
            for (var i = 0; i < navigation.length; i++) {
                var name = navigation[i]['name'];
                var href = navigation[i]['href'];
                var submenu = navigation[i]['navigation'];

                nav_html += '<li><a href="' + href + '">' + name + '<span class="ddArrow"></span></a>';     

                if( typeof(submenu) != 'undefined' ){
                    nav_html += '<ul>';
                    nav_html += makeNav(submenu);
                    nav_html += '</ul>';
                }
                nav_html += '</li>';
            }
            return nav_html;
        }
        $('#navigation ul').html(makeNav( new_json['navigation'] ));
    }

Answer 1

First of all this is not the whole code: container variable is used inside function loading(url) but it is not declared elsewhere.

The answer to your question is that nested function makeNav(navigation) is recursive by nature: note the line inside it:

nav_html += makeNav(submenu);

It is required because navigation object can contain nested navigation objects: note

var submenu = navigation[i]['navigation'];

function parseJSON() creates an html from json and inserts this html into $('#navigation ul'). May be more reasonable name for it should be function parseResponse() or better function processResponse().

Also note that global variable new_json is used only inside function parseJSON() - so may be it would be reasonable to add a parameter to this function and get rid of a global var:

$.get('navigation.json', function (json){
    processResponse(json);
...
});

and then

function processResponse(json) {

    function makeNav(navigation) {
        var nav_html = '';
        console.log( navigation.length );

        for (var i = 0; i < navigation.length; i++) {
            var name = navigation[i]['name'];
            var href = navigation[i]['href'];
            var submenu = navigation[i]['navigation'];

            nav_html += '<li><a href="' + href + '">' + name + '<span class="ddArrow"></span></a>';     

            if( typeof(submenu) != 'undefined' ){
                nav_html += '<ul>';
                nav_html += makeNav(submenu);
                nav_html += '</ul>';
            }
            nav_html += '</li>';
        }
        return nav_html;
    }

    $('#navigation ul').html(makeNav( json['navigation'] ));
}

How is your understading now?