Question

So I was making a JavaScript AJAX loader for my blog and well it’s not working. It was working before but when I attempted to add months into the parser and json file it just stopped and would not load.

Here is the JavaScript:

firstTime = 1;
function ajax_get_json_for_main_page(a){

var counter = 0;
var results = document.getElementById("blogShow");

    var hr = new XMLHttpRequest();
    hr.open("GET", "articles/main.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function() {
        var blog = new Array()
        var title = "";

        if(hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            for(var obj in data){
                for(var entry in data[obj])
                {
                    blog[counter] = "<h4>"+entry[obj].title+"</h4><p>"+entry[obj].post+"</p>"+"<hr />";
                    title += "<a onClick='willImpletmentlater(" + entry[obj] + ")" + "'>" + entry[obj].title + "</a><br /><br />"
                    counter = counter + 1;
                }

            }
            document.getElementById("big3").innerHTML = title;

            if(firstTime == 1)
            {
            results.innerHTML = blog[0]
            firstTime = 1000;
            }


            if(a == 1)
            {
                interval = setInterval(function(){blogShowAnimateInner(1, blog);}, 1);
            }
            if(a == 2)
            {
                interval = setInterval(function(){blogShowAnimateInner(2, blog);}, 1);
            }
            if(a == 3)
            {
                interval = setInterval(function(){blogShowAnimateInner(3, blog);}, 1);
            }
            if(a == 4)
            {
                interval = setInterval(function(){blogShowAnimateInner(4, blog);}, 1);  
            }


        }
    }   


hr.send(null);




}

And also the JSON:

 {
     "june": {
        "17": {
            "title": "Monday 17 of June 2012",
            "post": "the post taken out to save space."
        },
        "16": {
            "title": "Sunday 16 of June 2012",
            "post": "the post taken out to save space"
        },
        "15": {
            "title": "Saturday 15 of June 2012",
            "post": "the post taken out to save space"
        },
        "14": {
            "title": "Friday 14 of June 2012",
            "post": "the post taken out to save space"
        },
        "13": {
            "title": "Thursday 13 of June 2012",
            "post": "the post taken out to save space"
        },
        "12": {
            "title": "Wednesday 12 of June 2012",
            "post": "the post taken out to save space"
        },
        "11": {
            "title": "Tuesday 11 of June 2012",
            "post": "the post taken out to save space"
        },
        "10": {
            "title": "Monday 10 of June 2012",
            "post": " the post taken out to save space."
        }
    }

}    

I tried to go on Jsfiddle but I don’t think they load ajax?
Either way they gave me no hints.

Edit:
I it’s working now here is the main parse bit as suggested.

if(hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse(hr.responseText);

            var blog = [];
            var title = "";
            var counter = 0;

            for (var month in data) {
                var monthEntries = data[month];
                for (var i = 0; i < monthEntries.length; i++) {
                    var entry = monthEntries[i];
                    blog[counter] = "<h4>" + entry.title + "</h4><p>" + entry.post + "</p>" + "<hr />";
                    title += "<a onClick='willImpletmentlater(" + entry + ")" + "'>" + entry.title + "</a><br /><br />"
                    counter = counter + 1;
                }

            }

            console.log(blog);
            console.log(title);

            document.getElementById("big3").innerHTML = title;




            if(a == 1)
            {
                interval = setInterval(function(){blogShowAnimateInner(1, blog);}, 1);
            }
            if(a == 2)
            {
                interval = setInterval(function(){blogShowAnimateInner(2, blog);}, 1);
            }
            if(a == 3)
            {
                interval = setInterval(function(){blogShowAnimateInner(3, blog);}, 1);
            }
            if(a == 4)
            {
                interval = setInterval(function(){blogShowAnimateInner(4, blog);}, 1);  
            }


        }
    }   

Edit:
All good now

Edit:
It only works with june if I add july doesn’t work. Thats kinda wierd?

Answer 1

Ah, I see what you mean. Your json response month object is not an array it is an object with key value pairs, and object keys have no set order of retrieval when you do var key…To get the expected order, you should change the json response to something like this

   {
     "june": [
        {
            "day": "17",
            "title": "Monday 17 of June 2012",
            "post": "the post taken out to save space."
        },
        {
            "day": "16", 
            "title": "Sunday 16 of June 2012",
            "post": "the post taken out to save space"
        },
        {
            "day": "15",
            "title": "Saturday 15 of June 2012",
            "post": "the post taken out to save space"
        },
        {
            "day":"14",
            "title": "Friday 14 of June 2012",
            "post": "the post taken out to save space"
        },
        {    "day": "13",
            "title": "Thursday 13 of June 2012",
            "post": "the post taken out to save space"
        },
        {    "day": "12",
            "title": "Wednesday 12 of June 2012",
            "post": "the post taken out to save space"
        }
    ]

}

I have updated the jsfiddle.

http://jsfiddle.net/ew44p/1/