generating html from arbitrarily complex JSON object in javascript

Ask Time：2011-11-30T18:12:22 Author：kliron

Javascript/jQuery newbie here.

My webserver is sending the contents of a directory tree as a JSON object. The object is arbitrarily nested depending on the number of subdirectories containing other subdirectories. It looks like this:

{
    "contents": [
        {
            "filename": "myfile",
            "mtime": 123456,
            "size": 2345,
            "content": nil
        },
        {
            "filename": "mydir",
            "mtime": 2345678,
            "size": 3456788,
            "content": [
                {...},
                {...}
            ]
        }
    ]
}

myfile is a normal file and so "content" is empty. mydir is a directory which may be empty, or contain other files or subdirectories.

I want to parse this JSON with javascript and generate an html ul representation of the contents. My question is: Is there an easy/recommended way to do this?

Author:kliron，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/8324239/generating-html-from-arbitrarily-complex-json-object-in-javascript

Akhil Thayyil :

Use jQuery. In the jQuery ajax function use json for the dataType and it will automatically parse json and give a json object back. You can loop though the json array using jQuery each function and create your ui with data in it. \n\n$.ajax({url:'ur url',dataType:'json',success:function(result){\nvar dhtml=\"<ul>\";\n$.each(result.contents,function(key,value){\n dhtml+=\"<li>\"+value.filename+\"\"+value.mtime+\"</li>\";\n })\n\ndhtml+=\"</ul>\";\n\n$(body).append(dhtml);//Will add the result to ur html body\n}\n})\n\n\nJquery Each Api\n\nJquery ajax Api",

2011-11-30T10:19:47

T.J. Crowder :

If you're receiving the JSON text via an ajax call using jQuery, jQuery will deserialize it into an object graph for you. If you've received it in some other way and have it in a string, you can deserialize it with jQuery.parseJSON.\n\nHowever, the JSON you've quoted is invalid, specifically this bit:\n\n\"content\": nil\n\n\nThere is no nil keyword in JSON. You'll want to fix the server to either leave the key off entirely, or use null, or something else. Valid JSON is defined on the JSON website, and you can use http://jsonlint.com for handy validation (and formatting). It might also be useful to use content or contents consistently; currently the top level uses contents but the subordinate entries use content.\n\nOnce you have the object graph, it's a fairly simple matter of a recursive function, looping through the array entries and, for entries that can have nested content, calling itself again to loop through that. Something vaguely like this (live copy):\n\njQuery(function($) {\n\n display(\"Loading the JSON data\");\n $.ajax({\n type: \"GET\",\n url: \"/path/to/the/data\",\n dataType: \"JSON\",\n success: function(data) {\n display(\"Got the data, rendering it.\");\n $(document.body).append(renderContents(data.contents));\n },\n error: function() {\n display(\"An error occurred.\");\n }\n });\n\n function renderContents(contents) {\n var index, ul;\n\n // Create a list for these contents\n ul = $(\"<ul>\");\n\n // Fill it in\n $.each(contents, function(index, entry) {\n var li;\n\n // Create list item\n li = $(\"<li>\");\n\n // Set the text\n li.text(entry.filename);\n\n // Append a sublist of its contents if it has them\n if (entry.content) {\n li.append(renderContents(entry.content));\n }\n\n // Add this item to our list\n ul.append(li);\n });\n\n // Return it\n return ul;\n }\n\n function display(msg) {\n $(\"\").html(msg).appendTo(document.body);\n }\n});\n",

2011-11-30T10:19:17

generating html from arbitrarily complex JSON object in javascript