Playing with JSON

by salitrapraveen

HTML

<div id="test">
</div>

CSS

#genesis-listview {
    width: 300px;
    height: auto;
    top: 10px;
    right: 10px;
    bottom: 10px;
    border: 10px solid #fff;
    box-shadow: 0 2px 4px #999999;
    border-radius: 4px;
    position: absolute;
}

#genesis-listview h5 {
    color: #F4A460;
    font-weight: lighter;
    font-size: 18px;
    text-transform: uppercase;    
    text-align: center;
}

#genesis-listview .top-box {
    width: 98%;
    height: 100px;
}

#genesis-listview .counter {
    bottom: 2px;
    position: absolute;
    font-weight: bold;
    font-size: 10px;
}

#genesis-listview .top-box .search-box {
    margin: 20px 5px 30px 25px;
    color: #585D66;
}

#genesis-listview .top-box .top-bar {
    height: 20px;
    border: 1px solid #7B838F;
    background-color: #1B5266;
    color: #fff;   
    position: relative;
    padding: 5px 30px 5px 0px;
}

#genesis-listview .top-box input [type="checkbox"] {
    margin-right: 10px;
    float: left;
    display: inline;
    vertical-align: middle;
}

#genesis-listview .top-box .top-bar span {
    padding-left: 70px
}


#genesis-listview .result-box {
    width: 98%;
    height: auto;
    top: 120px;
    bottom: 20px;
    position: absolute;
    overflow: auto;
}

#genesis-listview .result-box table {
    width: 100%;
}

#genesis-listview .result-box td {
    border: 1px solid #C4C4C4;
    vertical-align: middle; 
    padding-bottom: 5px;
    padding-top: 5px;
}

#genesis-listview .result-box .poi-name {
    font-size: 14px;
    color: #333;
}

#genesis-listview .result-box .poi-type {
    font-size: 10px;
    color: #C7864E;
    text-transform: uppercase;
}

#genesis-listview button{
    bottom: 2px;
    right: 30px;
    position: absolute;
    font-weight: bold;
    font-size: 10px;
}

JavaScript

var jsonObj = {
    "Result": {
        "24473096": {
            "Title": "Bank of America - ATM",
            "City": "Sunnyvale",
            "Latitude": "37.409703",
            "Longitude": "-122.016724"
        },

        "42890486": {
            "Title": "Bbva Compass - ATM",
            "City": "Mountain View",
            "Latitude": "37.376847",
            "Longitude": "-122.034624"
        },

        "24472238": {
            "Title": "Citibank - ATM",
            "City": "Sunnyvale",
            "Latitude": "37.374195",
            "Longitude": "-122.029685"
        },

        "24474635": {
            "Title": "Citibank - ATM",
            "City": "Sunnyvale",
            "Latitude": "37.36197",
            "Longitude": "-122.025588"
        },

        "45224678": {
            "Title": "Citibank - ATM",
            "City": "Sunnyvale",
            "Latitude": "37.369109",
            "Longitude": "-122.035883"
        },

        "24472241": {
            "Title": "Wells Fargo Bank - ATM",
            "City": "Mountain View",
            "Latitude": "37.380263",
            "Longitude": "-121.992538"
        },

        "24473098": {
            "Title": "Bank of America - ATM",
            "City": "Sunnyvale",
            "Latitude": "37.374937",
            "Longitude": "-122.034779"
        },

        "24472237": {
            "Title": "Wells Fargo Bank - ATM",
            "City": "Sunnyvale",
            "Latitude": "37.375157",
            "Longitude": "-122.034678"
        },

        "21340755": {
            "Title": "Technology Credit Union - ATM",
            "City": "Mountain View",
            "Latitude": "37.38675",
            "Longitude": "-121.992837"
        },

        "24472222": {
            "Title": "Wells Fargo Bank - ATM",
            "City": "Sunnyvale",
            "Latitude": "37.380279",
            "Longitude": "-121.989893"
        },

        "24472434": {
            "Title": "Bay View Bank - ATM",
           ...