Access JSON elements using Javascript/Jquery

Question

I'm new to JSON, WebDevelopment, Javascript ...

I have the following JSON file

            {
                "component": "A",
                "status": 0,
                "children": [
                    {
                        "component": "AA",
                        "status": 0,
                        "children": [
                            {
                                "component": "AAA",
                                "status": 0,
                                "children": []
                            },
                            {
                                "component": "AAB",
                                "status": 0,
                                "children": []
                            }
                        ]
                    },
                    {
                        "component": "AB",
                        "status": 0,
                        "children": [
                            {
                                "component": "ABA",
                                "status": 0,
                                "children": []
                            },
                            {
                                "component": "ABB",
                                "status": 0,
                                "children": []
                            }
                        ]

                    }
                ]
            }

I need to read it using Javascript/Jquery and then display it. Later on I should develop code for Onclicking a "component A" on a webpage a list of components under it should be displayed and so on.Depending on the status variable a color is to be assigned to the component displayed ( in the form of an image like a box or something)

I wrote the following code:

            <html>
            <head>                   
            <title>Demo</title>
            </head>
            <body>

                <script src="jquery-1.9.1.min.js"></script>
                <script src="jquery-1.9.1.js"></script>
                <script>

                $(document).ready(function() {
                var myItems;

                $.getJSON('jsonfile.json', function(data) {

                 JSONArray children = jsonfile.getJSONArray("children");


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

Firstly what are the javascript equivalent of java functions for JSON like getJSONArray(), getJSONObject() etc Secondly any suggestions as to how i go about printing the details using what API's etc.

your json response is invalid. check here jsonlint.org and there is no JSONArray. you can use $.each to iterate the json object — Ravi Gadag
– Ravi Gadag, Commented Apr 1, 2013 at 12:29
Sorry I now validated it Can you please show the syntax of $.each in this context — Praneeth
– Praneeth, Commented Apr 1, 2013 at 12:34
jquery-1.9.1.min.js - is minimized jquery-1.9.1.js, remove one of them from your file — webdeveloper
– webdeveloper, Commented Apr 1, 2013 at 12:59

webdeveloper · Accepted Answer · 2013-04-01 12:51:50Z

1

please show the syntax of $.each in this context

var result = $('#result');
$.each(obj.children, function(i, v){
    result.append('<div>' + i + ' - ' + v.component + '</div>');
});

Demo: http://jsfiddle.net/LbJBm/

Documentation: jQuery.each()

answered Apr 1, 2013 at 12:51

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

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

3 Comments

Praneeth Over a year ago

Thanks a lot WebDeveloper I'll look into the code you gave and continue further from there

Praneeth Over a year ago

One more thing in the above code instead of declaring var obj=..... is a way to directly use the json file as object?

webdeveloper Over a year ago

@Praneeth Yes, in your example it is data. Look at the docs: api.jquery.com/jQuery.getJSON

웃웃웃웃웃 · Accepted Answer · 2013-04-01 12:29:35Z

0

var response            =   JSON.stringify(jsonvar);
response                =   JSON.parse(response);

response.componet will gives you A and thus you can access hte elements.

answered Apr 1, 2013 at 12:29

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

Collectives™ on Stack Overflow

Access JSON elements using Javascript/Jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related