javascriptjsonajax

Retrieving JSON data using Ajax in JavaScript


I don't think this is a repeat because I can't find a specific answer anywhere. I'm new to JavaScript and can't figure out how to pull JSON information in using Ajax and display it on my page. I know I'm doing something wrong from simply not understanding the languages that well.

My JSON looks like this:

{ "lots" : [
{
    "name" : "NE Corner HW4 & 41st",
    "info" : "$2/Hr<br>Monthly Parking Available",
    "center" : {
        "lat" : 57.659390,
        "lng" : -127.414754
    },
    "topLeft" : {
        "lat" : 57.659616,
        "lng" : -127.415102
    },
    "bottomRight" : {
        "lat" :57.659208,
        "lng" :-127.414371
    }
}, ...etc
]}

And here's the Ajax call (this may well be wrong):

var jsonFile = $.ajax({
  method: "GET",
  url: "filepath/filename.json",
  dataType: "JSON"
});

Then I need to use the info in several functions:

for (var i = 0; i < jsonFile.lots.length; i++) {
  marker = new google.maps.Marker({
  position: new google.maps.LatLng(jsonFile.lots[i].center.lat, jsonFile.lots[i].center.lng)
  marker.setMap(map);
}

What am I doing wrong (besides everything)? Is it my JSON array? Do I need to parse or stringify it? Maybe it's the Ajax call. The JavaScript? I feel like it's probably everything.


Solution

  • You have to have a success inorder to process the response you get. Example

    $.ajax({
        url: 'Your service url',
        type: 'GET' or 'POST',
        dataType: 'json',
        success: function(response){
             //Do what ever you want with the response variable
             //Do a console.log(response) to see what is coming as the response
        }
    })
    

    As per your example you can use the following.

    jsonFile.done(function(response){
        //Do what ever your want with the response.
    })