Passing values between functions and jquery

Question

I'm having difficulty juggling values in jQuery, as most of jQuery is done in an external script, and I'm not sure when I'm in functions and not in functions, so it's hard to tell when global vars are set and not set.

This one in particular is puzzling me, and I'm absolutely stumped, logically to me it should work, but there seems to be something capping it at some point, and disregarding the values I'm trying to store.

I've concluded this, as the error I'm having is that inside the second getJSON call, I'm getting a 'val' undefined issue, but Javascript console isn't showing any javascript errors, just getting an undefined log when I log to the console and also print the object in an alert.

Just need a fresh set of eyes, feel like this is probably something simple, but I've been looking at the code so long that I can't seem to fathom it.

Any help is greatly appreciated.

var post_ids = new Array();
var i = 0;
var val;

$.getJSON("/client-ajax/last-ten-posts.php", function(data){
    $.each(data, function(k, val) {
        post_ids.push(val.id);
    });
});

$.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[0], function(val){
    alert(val.title+"");
    $("#postContainer").empty();
    $("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
});

UPDATE:

I edited the code slightly in light of @N0ir's answer, but to no success. The done method ensure that actions are taken once the async process is complete, but although this is the case, val is still undefined. The code I've tried is below for examination and dissemination.

$.getJSON("/client-ajax/last-ten-posts.php", function(data){
    $.each(data, function(k, val) {
        post_ids.push(val.id);
    });
}).done(function(){
    $.getJSON("/client-ajax/last-ten-posts.php?post-id=" + post_ids[0], function(val){
        alert(val.title+"");
        $("#postContainer").empty();
        $("#postContainer").append("<p class='title'>" + val.title + "</p><div class='post-icon'></div><pre>" + val.content + "</pre><p class='footnote'>Posted by " + val.firstname + " " + val.surname + " at <time datetime='2014-06-10'>08:52</time> GMT+00 on the <time>10-06-2014</time></p>");
    });
}); 

UPDATE - Network Return on call for JSON:

GET http://*****************.com/client-ajax/last-ten-posts.php [HTTP/1.1 200 OK 154ms]
GET http://*****************.com/img/home.jpg [HTTP/1.1 304 Not Modified 152ms]
GET http://*****************.com/img/about.png [HTTP/1.1 304 Not Modified 142ms]
GET http://*****************.com/img/about-repeat.jpg [HTTP/1.1 304 Not Modified 147ms]
GET http://*****************.com/img/blog.jpg [HTTP/1.1 304 Not Modified 146ms]
GET http://*****************.com/img/portfolio.jpg [HTTP/1.1 304 Not Modified 210ms]
GET http://*****************.com/img/contact.jpg [HTTP/1.1 304 Not Modified 209ms]
GET http://*****************.com/client-ajax/last-ten-posts.php [HTTP/1.1 200 OK 207ms]

Answer 1

So I found the issue, turns out fetchAll() in php's PDO returns an array, so when creating the JSON from the array, the JSON needs to be accessed through the first element of the array, like so:

val[0].content

rather than:

val.content