Display JSON object elements using Jquery on a webpage

Question

I'm new to Jquery and webapplication development, I have a JSON file defined as an object below I want to read it and display its elemts on a webpage as HTML elemts For the below JSON file i want the output as follows:

Later on I plan to display the components and their statuses under a present component on a clicking event

I wrote the below code

            <!DOCTYPE html>
            <html>
            <head>

                <script src="jquery-1.9.1.js"></script>
            </head>
            <body>
              <div id="result">

            </div>
            <script>
            var obj = {
                        "component": "A",
                        "status": 0,
                        "children": [
                            {
                                "component": "AA",
                                "status": 0,
                                "children": [
                                    {
                                        "component": "AAA",
                                        "status": 0,
                                        "children": []
                                    },
                                    {
                                        "component": "AAB",
                                        "status": 2,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "component": "AB",
                                "status": 0,
                                "children": [
                                    {
                                        "component": "ABA",
                                        "status": 0,
                                        "children": []
                                    },
                                    {
                                        "component": "ABB",
                                        "status": 1,
                                        "children": []
                                    }
                                ]

                            }
                        ]
            };
            //Start function
            $(function() {
                var result = $('#result');
                alert("hello");
                procedure(obj);
            });

            //Function to display the list of children of a given object
            function display(dref){

                result.append('<div>' +  dref.component + ' - '+ dref.status +'</div>');    
                $.each(dref.children, function(i, v){
                result.append('<div>' +  v.component + ' - '+ v.status +'</div>');
            });
            };

            //Recursive function to repeatedly check for children of every component
            function procedure(pref){
                display(pref);
                if(pref.children not null)
                {
                    $.each(pref.children, function(i, v){
                    procedure(children)

                    }    
            }   
            };
            </script> 
            </body>
            </html>

There are syntax errors at some places , can anyone please help me out to get the required output

Where is the JSON ? Did you mean you have a literal JavaScript object ? — Denys Séguret
– Denys Séguret, Commented Apr 2, 2013 at 12:26
If it's an object it cannot be JSON. JSON is always a string. Note the difference between var isJSON = '{"hellow": "world"}'; and var isObject = {"hellow": "world"}; — Álvaro González
– Álvaro González, Commented Apr 2, 2013 at 12:28

Arun P Johny · Accepted Answer · 2013-04-02 12:46:55Z

1

Try

$(function(){
    var $result = $('#result');
    function process(obj, flag){
        if(!flag){
            $('<li/>').text(obj.component + '-'+obj.status).appendTo($result);
        }

        if(obj.children){
            $.each(obj.children, function(i, v){
                $('<li/>').text(this.component + '-'+this.status).appendTo($result);
            });
            $.each(obj.children, function(i, v){
                process(this, true);
            });
        }
    }

    process(obj);

});

Demo: Fiddle

answered Apr 2, 2013 at 12:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Praneeth Over a year ago

Thanks a lot Arun, this was what I was looking for a start, one more thing if I want the list components under a component to be displayed onclick of the component you have any suggestions?

Gurmeet · Accepted Answer · 2013-04-02 12:51:38Z

1

Are you looking for this:

var result_temp = "";
    function procedure(pref) {
        result_temp = result_temp + pref.component + "-" + pref.status+"<br/>";
        if (pref.children != null) {
            $.each(pref.children, function (i, v) {
                //alert(JSON.stringify(v));
                procedure(v);

            });
        }
    }

    $(document).ready(function () {
        procedure(obj); 
     $("#answer").html(result_temp);
    });

Here "#answer" is id you your result div.

answered Apr 2, 2013 at 12:51

Gurmeet

3,3245 gold badges23 silver badges45 bronze badges

Collectives™ on Stack Overflow

Display JSON object elements using Jquery on a webpage

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related