Recursion with Javascript on JSON data

So, I have this function.

function makeContent(jsonData) {
    var aProperty,
    containerType,
    contentContainerName,
    containerIdentifier,
    containerComment,
    theContent;
    console.log("jsonData = ");
    console.log(jsonData);
    var madeContent;

    for (aProperty in jsonData) {
        console.log("Working on property " + aProperty);
        console.log("With value of ");
        console.log(jsonData[aProperty]);
        switch (aProperty) {
        case "containerType": {
                containerType = jsonData[aProperty];
                break;
            }
        case "contentContainerName": {
                contentContainerName = jsonData[aProperty];
                break;
            }
        case "containerComment": {
                containerComment = jsonData[aProperty];
                break;
            }
        case "containerIdentifier": {
                containerIdentifier = jsonData[aProperty];
                break;
            }
        case "itemContent": {
                theContent = jsonData[aProperty];
                break;
            }
        }
    }

    if (typeof theContent !== 'undefined') {
        console.log("theContent =");
        console.log(theContent);
        if (theContent.hasOwnProperty) {
            if (madeContent != 'undefined') {
                madeContent = makeContent(theContent);
                madeContent = "<" + containerType + " " + containerIdentifier + "=\"" + contentContainerName + "\">" + madeContent + "</" + containerType + ">" + containerComment;
            }
        } else {
            madeContent = "<" + containerType + " " + containerIdentifier + "=\"" + contentContainerName + "\">" + theContent + "</" + containerType + ">" + containerComment
                console.log(madeContent);
            console.log("Else statement");
        }

    }

    return madeContent;
}

My trouble doesn't start until after the recursive call. For some reason after I call the makeContent() again in a recursive way, in the for loop to go through the properties in the object, I get 0 for the aProperty.

The JSON Data:

    {
        "contentContainerName" : "footer-bgcontent", 
        "containerType" : "div",
        "containerIdentifier" : "id",
        "containerComment" : "<!-- End #footer-bgcontent-->",
        "itemContent" : [ 
            {
                "contentContainerName" : "footer",
                "containerType" : "div",
                "containerIdentifier" : "id",
                "contentComment" : "<!-- End #footer -->", 
                "itemContent" : [
                    {
                        "contentContainerName" : "footerLink",
                        "containerType" : "a",
                        "containerIdentifier" : "id",
                        "contentTag" : "<a href=\"missionStatement.html\" id=\"footerLink\" title=\"Link to mission statement\"></a>"                   
                    },
                    {
                        "contentContainerName" : "footerContent",
                        "containerType" : "div",
                        "containerIdentifier" : "id",
                        "contentTag" : "<div id=\"footerContent\"></div><!-- End #footerContent-->",
                        "itemContent" : [
                            {
                                "contentContainerName" : "createdBy",
                                "containerType" : "p",
                                "containerIdentifier" : "id",
                                "contentTag" : "<p id=\"createdBy\"></p>",
                                "itemContent" : "Created by: Patrick McAvoy"
                            },
                            {
                                "contentContainerName" : "lastModified",
                                "containerType" : "p",
                                "containerIdentifier" : "id",
                                "contentTag" : "<p id=\"lastModified\"></p>",
                                "itemContent" : "Last Modified: "
                            },
                            {
                                "contentContainerName" : "copyright",
                                "containerType" : "p",
                                "containerIdentifier" : "id",
                                "contentTag" : "<p id=\"copright\"></p>",
                                "itemContent" : "Copright"
                            }
                        ]
                    }
                ]   
            }
        ]

    }

Then the output

    jsonData = 
footer.js:51
Object
footer.js:55Working on property contentContainerName
footer.js:56With value of 
footer.js:57footer-bgcontent
footer.js:55Working on property containerType
footer.js:56With value of 
footer.js:57div
footer.js:55Working on property containerIdentifier
footer.js:56With value of 
footer.js:57id
footer.js:55Working on property containerComment
footer.js:56With value of 
footer.js:57<!-- End #footer-bgcontent-->
footer.js:55Working on property itemContent
footer.js:56With value of 
footer.js:57[
Object
]
footer.js:83theContent =
footer.js:84[
Object
]
footer.js:50jsonData = 
footer.js:51[
Object
]
footer.js:55Working on property 0
footer.js:56With value of 
footer.js:57
Object
footer.js:38Made content: 
footer.js:39<div id="footer-bgcontent">undefined</div><!-- End #footer-bgcontent-->

Answers


I'm unsure if this is causing your problem, but this line is wrong:

if (theContent.hasOwnProperty) 

.hasOwnProperty is a method of every object/type in JS, so the test above is always true and so your code will always recurse, even if .itemContent is a string.

In any event, the code is unnecessarily complicated - there's no need to iterate through all the properties and test each key - just assign them directly to the required variables!

I believe the below code replicates what you're trying to do and is much shorter!

function makeContent(data) {
    var type = data.containerType || 'div',
        name = data.contentContainerName || '',
        id = data.containerIdentifier || 'id',
        comment = data.containerComment || '',
        content = data.itemContent || '';

    if (Array.isArray(content)) {
        content = content.map(makeContent).join('');
    }

    return '<' + type + ' ' + id + '="' + name + '">' + content +
           '</' + type + '>' + comment;
}

where the || 'foo' ensures the strings are assigned default values if not specified.

See http://jsfiddle.net/alnitak/rmTTg/ - NB: this code does nothing with the contentTag proeprty which is also unused in your own code.


Need Your Help

Rackspace CloudFiles: Check for the existence of a file

asp.net api rackspace-cloud cloudfiles

I want to check for the existence of a file on the CDN through my site's code via the Rackspace Cloud API.

mySql count all latest versions

mysql sql database table cakephp-2.0

In had a question up yesterday unfortunately i didn't explain my self well enough - one of them end of the day things :').

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.