将HTML元素追加到现有元素的AngularJS指令

Question

I have an AngularJS , JS , JQ , HTML5 web app, which is capable of sending different HTTP methods to our project's RESTful Web Service and receiving responses in JSON .

It looks like this:

What I want is to create an AngularJS directive , which could accept JSON object and create an <li> for every JSON property it finds. If property itself is an object - the function should be called recursively.

Basically, I search a way to parse a JSON object to HTML elements in a such way that following JSON:

{
    "title": "1",
    "version": "1",
    "prop" : {
         "a" : "10",
         "b" : "20",
         "obj" : {
              "nestedObj" : {
                   "c" : "30"
               } 
          }
     }
}

Would be transfrormed into following html:

<ul>
    <li>title : 1</li>
    <li>version : 1</li>
    <li>
        prop : 
        <ul>
            <li>a: 10</li>
            <li>b: 20</li>
            <li>
                obj : 
                <ul>
                    <li>
                        nestedObj : 
                        <ul>
                            <li>c : 30</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Does anyone know how to achieve this using AngularJS directives? Every useful answer is highly appreciated and evaluated.

Thank you.

Answer 1

I tried this by recursivly include a directive. But this seems be really ugly.

My solution is just like the plain old html generated out of a recursive method and append as element:

//recursivly generate the object output
scope.printObject = function (obj, content) {
    content = "<ul>";
    for (var i in obj) {
       if (angular.isObject(obj[i])) {
           content += "<li>"+i+""+scope.printObject(obj[i])+"</li>";
       } else {
           content += "<li>" + i + ":" + obj[i] + "</li>";
       }
    }
    content+="</ul>";
    return content;
 };

Full working code here:

http://jsfiddle.net/zh5Vf/1/

Answer 2

It has little to do with Angular (it's plain old JS), but for the fun of it, here is a directive that does what you want:
(It is a bit more lengthy in order to properly format the HTML code (indent) and support custom initial indentation.)

app.directive('ulFromJson', function () {
    var indentationStep = '    ';

    function createUL(ulData, indentation) {
        indentation = indentation || '';

        var tmpl = ['', '<ul>'].join('\n' + indentation);
        for (var key in ulData) {
            tmpl += createLI(key, ulData[key], indentation + indentationStep);
        }
        tmpl = [tmpl, '</ul>'].join('\n' + indentation);

        return tmpl;
    }

    function createLI(key, value, indentation) {
        indentation = indentation || '';

        var tmpl = '';
        if (angular.isObject(value)) {
            var newIndentation = indentation + indentationStep;
            tmpl += '\n' + indentation + '<li>' +
                    '\n' + newIndentation + key + ' : ' +
                    createUL(value, newIndentation) +
                    '\n' + indentation + '</li>';
        } else {
            tmpl += '\n' + indentation + '<li>' + key + 
                    ' : ' + value + '</li>';
        }

        return tmpl;
    }

    return {
        restrict: 'A',
        scope: {
            data: '='
        },
        link: function postLink(scope, elem, attrs) {
            scope.$watch('data', function (newValue, oldValue) {
                if (newValue === oldValue) { return; }
                elem.html(createUL(scope.data));
            });

            elem.html(createUL(scope.data));
        }
    };
});

And then use it like this:

<div id="output" ul-from-json data="data"></div>

---

See, also, this short demo .