Recursion with Javascript on JSON data

Question

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-->

When the method is being called recursively the jsonData is an Object. Though when I print out the aProperty I get 0. The value is the object. So is the object technically an array still? Or should I instantiate it as an object before? — pmac89
– pmac89, Commented May 1, 2013 at 20:53
You have what looks like a typo: if (madeContent !== 'undedfined') {. That should probably be if (typeof madeContent != 'undefined') { (two errors: spelling of 'undefined' and missing typeof). Also, what's the reason for testing whether the property theContent.hasOwnProperty exists? — Ted Hopp
– Ted Hopp, Commented May 1, 2013 at 20:54
@TedHopp I saw that too, but even without the typo it doesn't make sense. At that point in the code, "madeContent" will always be undefined (right?) — Pointy
– Pointy, Commented May 1, 2013 at 20:57

Alnitak · Accepted Answer · 2013-05-01 22:28:43Z

1

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.

edited May 1, 2013 at 22:28

answered May 1, 2013 at 20:58

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

1 Comment

pmac89 Over a year ago

Ah... That makes more sense. It works great. Also, I sorry about the contentTag, I actually realized after building the JSON file that I could just build from that instead of including more information in the JSON file. My bad.

Collectives™ on Stack Overflow

Recursion with Javascript on JSON data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related