How can i select one object from many objects in a JSON file with this jquery code

How can i select one object from many objects in a JSON file with this jquery code

I need to get the latest blog post in the top of my page, the main area. All the posts is stored in a JSON file and when i make a new post it should come on top of my webpage to the main area. I also have a menu with all the posts listed. When I click on a "post" it should appear in the main area and when i reload the page again it should show the latest post in the main area. Hoq can i do that with jquery? this is my code so far:


This is the JSON file:
Code: 
{
    "postHead": {
        "title": "My day",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "date": "12/0-16",
        "author": "Me",
        "image": "../img/post1.JPG"
    },
    "post2": {
        "title": "This right here",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit ",
        "date": "12/0-16",
        "author": "Me",
        "image": "../img/post2.JPG"
    },
    "post4": {
        "title": "Min vackra",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit ",
        "date": "12/0-16",
        "author": "Me",
        "image": "../img/post3.JPG"
    }
}
This is Script file:
Code: 
$(document).ready(function() {
    $.ajax({
        dataType: "json",
        url: "posts.json",
    }).done(function(object) {
        var result = $("#result");
        for (var key in object) {
            if (!object.hasOwnProperty(key))
                continue;

            var element = object[key];

            result.append(
                "<div class='col-sm-12' id='blog-post'>" +
                "<div><h2 class='blog-post-head'>" + element.title + "</h2></div>" +
                "<div><img src=" + " ' " + element.image + " ' " + "class='img-thumbnail'></div>" +
                "<p>" + element.content + "</p>" +
                "<div><p><strong>" + element.author + "</strong></p></div>" +
                "<div><p><i>" + element.date + "</i></p></div>" +
                "</div>")
            side.append("<li><a href=" + this + ">" + element.title + "</a></li>");
        };
    });
});
HTML FILE:
Code: 
   <!DOCTYPE html>
     <html lang="en">
     <head>
     <title>PROJECT</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="jquery.js"></script>
  </head>
  <body>
     <div class="jumbotron" id="header">
     </div>
   <div class="navbar navbar-inverse navbar-fixed-left" id="side">
   <button type="button" class="navbar-toggle" id="btn" data-toggle="collapse"                                 data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
       </button>
     <div class="collapse navbar-collapse" id="myNavbar">

   <ul class="nav navbar-nav">
    </ul>
   </div>
   </div>
    <div class="container" id="posts">
     <div class="row" id="result">
       <div class="blog-post"></div>
     </div>
    </div>
    </body>
    </html>

So my problem is that I have no clue on how to do this.

stackoverflow:  javascript - How can i select one object from many objects in a JSON file to show at the top of my website? - Stack Overflow