Question

I am new to handling JSON data and I am trying to learn it by getting data from the Police API and displaying it on my Google Map.

Basically I want to take in a user input which gets Geocoded and then does a request to “http://policeapi2.rkh.co.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592” (lat and long being the geocoded address).

I have been searching all over, but anything that seems to use cURL (which is what they suggest on their website), gets involved with PHP. There was a good example on richardalan.co.uk, but I have never used PHP in my life and the technologies I am using are Spring MVC, Google App Engine, Google Maps(JavaScript).

I just want to know if I can do it in my JavaScript that has also been used to create functions for my maps and how do I do it?

Thank you in advanced,

Mark

I have now provided this question with a solution

Answer 1

I have done this now using my Spring MVC controllers to GET the JSON data I needed and then displayed it in my page and on a Google Map using JQuery AJAX.

Here is my Controller that gets the JSON data from the Police API:

    @Controller
public class CrimeRESTController {


    @RequestMapping(value = "/crimes", method = RequestMethod.GET)
    public @ResponseBody Object jsonCrimes(){

            SimpleClientHttpRequestFactory s = new SimpleClientHttpRequestFactory() {
            @Override
            protected void prepareConnection(HttpURLConnection connection, String httpMethod) throws IOException {
                super.prepareConnection(connection, httpMethod);

                //Basic Authentication for Police API
                String authorisation = "username" + ":" + "password";
                byte[] encodedAuthorisation = Base64.encode(authorisation.getBytes());
                connection.setRequestProperty("Authorization", "Basic " + new String(encodedAuthorisation));
            }
        };


        RestTemplate rt = new RestTemplate(s);


        Object crime;
        crime = rt.getForObject("http://policeapi2.rkh.co.uk/api/crimes-street/all-crime?lat=53.4107766&lng=-2.9778383", Object.class);

        return crime;

    }
}

Here is part of my index.jsp page where I display the JSON data onto the map:

    <script>                
           <%---------------------------------------------------%>
           <%---------CODE THE LAT LONG IN INPUT FIELD----------%>
           <%---------------------------------------------------%>
           function codeLatLng(latitude, longitude){

               var latlng = new google.maps.LatLng(latitude, longitude);

                         marker = new google.maps.Marker({
                             position: latlng,
                             map: map
                         });
           }
           <%---------------------------------------------------%>
    </script>

Here is part of my index.jsp page where I loop through the JSON data to display the results to my view and also get the longitude and latitude and send it to my function shown above (I understand this might look messy and there might be a better way to do it, but it works):

<script type="text/javascript">
            function displayCrimesOnMap() {
                $.getJSON("crimes.htm", function(data) {
                   $('#crimes').text('');
                   $.each(data, function(key, value) {
                       $('#crimes').append('<br>');
                       $.each(value, function(newKey, newValue){
                           if(newKey == "location"){
                               var latitude;
                                var longitude;
                               $.each(newValue, function(key2, value2){
                                if(key2 == "latitude"){

                                    latitude = value2;
                                }
                                if(key2 == "longitude"){

                                    longitude = value2;
                                }
                                if(key2 == "street"){
                                   $('#crimes').append('<p class="areatext">' + '<b>'+key2+'</b>' + '</p>');
                                      $.each(value2, function(key3, value3){
                                           $('#crimes').append('<p class="areatext">' + '<b>'+key3+'</b>' +": " + value3 + '</p>');
                                      })
                                }else{
                                    $('#crimes').append('<p class="areatext">' + '<b>'+key2+'</b>' +": " + value2 + '</p>');
                                }

                               })
                               //alert(latitude+", "+longitude);
                               codeLatLng(latitude,longitude);
                           }else{
                                $('#crimes').append('<p class="areatext">' + '<b>'+newKey+'</b>' +": " + newValue + '</p>');
                           }
                       })
                    })
                });
            }
        </script>

Here is part of my index.jsp page where the information gets output to a specific section in index.jsp:

<h1 class="areatitle">Crimes...   <input type="button" value="Get Crimes" onclick="displayCrimesOnMap()"/></h1>
                       <div id="crimes">
                       <!--Crimes Appears Here-->
                       </div>

I really do hope this helps someone other than me, as I found I had a hard time understanding AJAX, after I finally understood it, it was actually really easy 🙂