AngularJS directive that appends HTML elements to existing element

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:

enter image description here

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.

Konstantin Krass · Accepted Answer · 2014-04-16 10:22:45Z

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/

answered Apr 16, 2014 at 10:22

Konstantin Krass

8,6461 gold badge20 silver badges24 bronze badges

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

Comments

gkalpak · Accepted Answer · 2014-04-16 10:52:11Z

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.

Collectives™ on Stack Overflow

AngularJS directive that appends HTML elements to existing element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related