generating html from arbitrarily complex JSON object in javascript

Question

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?

Note that the JSON is invalid ("content": nil -- there is no nil in JSON). — T.J. Crowder
– T.J. Crowder, Commented Nov 30, 2011 at 10:19
Thank you all for your answers. Fixed toplevel "contents" to "content". As I explain below, nil is actually null. — kliron
– kliron, Commented Nov 30, 2011 at 11:50

T.J. Crowder · Accepted Answer · 2011-11-30 10:31:31Z

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.

However, the JSON you've quoted is invalid, specifically this bit:

"content": nil

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

Once 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):

jQuery(function($) {

  display("Loading the JSON data");
  $.ajax({
    type:     "GET",
    url:      "/path/to/the/data",
    dataType: "JSON",
    success:  function(data) {
      display("Got the data, rendering it.");
      $(document.body).append(renderContents(data.contents));
    },
    error:    function() {
      display("An error occurred.");
    }
  });

  function renderContents(contents) {
    var index, ul;

    // Create a list for these contents
    ul = $("<ul>");

    // Fill it in
    $.each(contents, function(index, entry) {
      var li;

      // Create list item
      li = $("<li>");

      // Set the text
      li.text(entry.filename);

      // Append a sublist of its contents if it has them
      if (entry.content) {
        li.append(renderContents(entry.content));
      }

      // Add this item to our list
      ul.append(li);
    });

    // Return it
    return ul;
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

Thank's for the heads up. The nil part is actually an artifact as I wrote the json looking at the (clojure) object that gets converted into the json string on the server side. In the actual json the nils are converted to nulls. I corrected the content -> contents also as you suggested.

row1 · Accepted Answer · 2011-11-30 10:31:26Z

1

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.

$.ajax({url:'ur url',dataType:'json',success:function(result){
var dhtml="<ul>";
$.each(result.contents,function(key,value){
        dhtml+="<li><span>"+value.filename+"</span><span>"+value.mtime+"</span></li>";
  })

dhtml+="</ul>";

$(body).append(dhtml);//Will add the result to ur html body
}
})

Jquery Each Api

Jquery ajax Api

edited Nov 30, 2011 at 10:31

row1

5,5883 gold badges48 silver badges74 bronze badges

answered Nov 30, 2011 at 10:19

Akhil Thayyil

9,4256 gold badges38 silver badges48 bronze badges

7 Comments

T.J. Crowder Over a year ago

You'll need to HTML-escape the filename, otherwise if it has (say) an ampersand (&) in it, it may cause trouble as you're interpreting that as HTML.

T.J. Crowder Over a year ago

@Akhil: You can, but it violates separation of concerns. The server is producing JSON output. It might be used for all sorts of things; displaying in HTML is just one possibility.

Akhil Thayyil Over a year ago

But in the demo json there's no such data to be escaped na ?

T.J. Crowder Over a year ago

@Akhil: You can't predict what the filenames will be, not properly escaping text from the server is just poor practice. (BTW, "na" is not an English word.)

Akhil Thayyil Over a year ago

@T.J.Crowder if as its a listing of files in a folder , there's is no chance for such special chars ..

|

RoToRa · Accepted Answer · 2011-11-30 10:43:56Z

The easiest way to loop through a traverse structure like this is usually to write a recursive ("self-calling") function:

// $parent is a jQuery object referring to an element 
// you what to create the tree in.
// data is your (parsed) JSON object.
function displayFileTree($parent, data) {
  if (data["contents"] && data["contents"].length) {
    var contents = data["contents"];

    // create a list element
    $list = $("<ul/>");

    // loop over the "contents"
    for (var i = 0, len = contents.length; i < len; i++) {

       // create list item, set its text and append it to the list
       $item = $("<li/>").text(contents[i].filename).appendTo($list);

       // call this function to create a sublist of the subitems
       displayFileTree($item, contents[i]);

    }

    // add list to parent
    $parent.append($list);
  }
}

(This function assumes the JSON is correct as suggested by T.J. Crowder's answer, and especially that it uses "contents" as the key everywhere and not "content".)

(EDIT: I started writing this before Crowder extended his answer with a similar solution.)

Collectives™ on Stack Overflow

generating html from arbitrarily complex JSON object in javascript

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related