JSON & JavaScript Syntax

Question

I am trying to print out a list of JSON object attributes. I also tried to print out an individual ob object's attribute. The printout to the console indicates that I am opening the file and receiving the two objects and sub objects okay. However, I am making a mistake somewhere in trying to cycle through the objects and print them out an attribute of each.

...
<script type="text/javascript">
    var dta1;
    $(document).ready(function() {
        $.ajax({
            type : "GET",
            url : "data/data5.json",
            success : function test(data) {
                dta1 = data.object1;
                dta2 = data.object2;

                console.log("object1", dta1);               
                console.log("object2", dta2);               
            }
        });
    });
</script>

</head>
<body>
    <script type="text/javascript">
        for(i in dta1){
            document.write(dta1[i].x);
        }
        document.write(dta1["object11"].x);
    </script>
</body>

Here's the json file.

{
    "object1": {
        "object11": {"x": "10", "y": "20", "z": "30"}, 
        "object12": {"x": "40", "y": "50", "z": "60"}, 
        "object13": {"x": "70", "y": "80", "z": "90"}
    }, 
    "object2": {
        "object21": {"x": "100", "y": "200", "z": "300"}, 
        "object22": {"x": "400", "y": "500", "z": "600"}, 
        "object23": {"x": "700", "y": "800", "z": "900"}
    }
}

How do you know that dta1 has been loaded when you print it? — lc2817
– lc2817, Commented Oct 12, 2011 at 0:37
lc2817, console.log("object1", dta1); <--this shows the information in the browser via Chrome development tools (in the console tab). — John R
– John R, Commented Oct 12, 2011 at 0:42
I know, I talk about the html part and that is exactly what is stated in the answer. — lc2817
– lc2817, Commented Oct 12, 2011 at 2:00

Phil · Accepted Answer · 2011-10-12 00:49:51Z

Your second script block will run before the one in the head due to your use of the jQuery "document ready" handler which only runs after the document has fully loaded.

Also, you can't rely on an asynchronous request (AJAX) completing before your next block of code runs. Anything that uses data retrieved via AJAX should be called within the "success" callback.

What you should probably do is create a container element in your HTML, eg

<body>
    <ul id="data-container"></ul>
</body>

and append the values to that within your AJAX success callback, eg

success : function test(data) {
    var dta1 = data.object1;
    var dta2 = data.object2;

    var container = $("#data-container");

    for (var o in dta1) {
        if (dta1.hasOwnProperty(o)) {
            container.append($("<li>").text(dta1[o].x));
        }
    }
}

Collectives™ on Stack Overflow

JSON & JavaScript Syntax

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related