Demo for an SO answer

SO answer: http://stackoverflow.com/questions/12238072/filtering-json-data-with-jquery/12238235

HTML

<!DOCTYPE html>
<html><head>
    <title>Task Four</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="index_files/jquery.js"></script>
    <script type="text/javascript" src="index_files/custom.js"></script>
    <link rel="stylesheet" type="text/css" href="index_files/style.css">
    </head>
    <body>

    <div id="inbox">
    </div>
     <div id="sentbox">
    
    </div>
        <!--?php
        
        ?-->
    

</body></html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

html {
    overflow-x: none;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}
form {padding:0; margin:0;}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


root {
    display: block;
}
.post {
    width: 30%;
    margin: 10px 0px 10px 10px;
    background-color: #A4C8FF;
    border-radius: 15px;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    border: solid 2px #033;
    -moz-box-shadow: -5px -5px 3px #888;
-webkit-box-shadow: -5px -5px 3px #888;
box-shadow: -5px -5px 5px #888;
}

.h1 {
    color: #FFF;
    background-color: #4B7EF5;
    border-radius: 15px 15px 0px 0px;
    padding-left: 10px;
    height: 100%;
}
.content {
    background-color: #FFFFFF;
    border: 2px solid #666666;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    padding: 5px;
}

.time {
    font-size: 14px;
    font-style: italic;
    text-align: right;
    padding-right: 15px;
    color: #666;
}

JavaScript

var json = {
   "data":[
      {
         "id":"2146",
         "from":{
            "id":"234",
            "name":"Alan Ford"
         },
         "to":{
            "id":"4949",
            "name":"Eric Owens"
         },
         "type":"1",
         "replyto":"0",
         "date_sent":"1344359836",
         "date_read":"0",
         "subject":"test",
         "message":"test inbox",
         "message_formatted":"test inbox",
         "date_sent_formatted":{
            "id":1196,
            "timestamp":1344297600,
            "month":8,
            "day":7,
            "year":2012,
            "week":32,
            "dayid":3,
            "weekday":"Tue",
            "mname":"Aug",
            "formatted":"Aug 7, 2012"
         },
         "date_read_formatted":[

         ]
      },
      {
         "id":"2048",
         "from":{
            "id":"234",
            "name":"Alan Ford"
         },
         "to":{
            "id":"8110",
            "name":"Event"
         },
         "type":"1",
         "replyto":"0",
         "date_sent":"1343248577",
         "date_read":"0",
         "subject":"afd",
         "message":"asdfads",
         "message_formatted":"asdfads",
         "date_sent_formatted":{
            "id":1184,
            "timestamp":1343260800,
            "month":7,
            "day":26,
            "year":2012,
            "week":30,
            "dayid":5,
            "weekday":"Thu",
            "mname":"Jul",
            "formatted":"Jul 26, 2012"
         },
         "date_read_formatted":[

         ]
      },
      {
         "id":"2047",
         "from":{
            "id":"5245",
            "name":"Ian Graham"
         },
         "to":{
            "id":"234",
            "name":"Alan Ford"
         },
         "type":"1",
         "replyto":"0",
         "date_sent":"1343234342",
         "date_read":"1343837983",
         "subject":"re: This is SP",
         "message":"Hi How are you[quote=Alan Ford]This is SP..Thais is...