CODEWITHSUNDEEP
jqueryjson
qqruza
qqruza

Reputation: 1417

Getting data from a json string

I am having a problem of getting values from my JSONP string which I am getting via AJAX request which looks like:

 result({"respond":1,"paging":{"stillmore":0,"perpage":10,"callpage":1,"next":2,"previous":0,"pages":1,"result":"4"},"message":"","result":[{"ID":"1","user_email":"[email protected]","custom_fields":{"user_longitue":"51.5081","user_latitude":"0.0878"}},{"ID":"2","user_email":"[email protected]","custom_fields":{"user_longitue":"51.9081","user_latitude":"0.2878"}},{"ID":"3","user_email":"[email protected]","custom_fields":{"user_longitue":"51.6081","user_latitude":"0.1878"}}]})

My javascript should take values of user_latitude and user_longitue but for some reasons cannot make it.

 var myData = JSON.parse(jsonString);

 $(document).ready(function () {

var distanceObj = [],
    i = 0;

$.each(myData.result, function (a, b) {
    distanceObj[i] = { distance: hesapla(51.41140000, -0.22600000, b.custom_fields.user_longitude, b.custom_fields.user_latitude), location: a };
    ++i;
});

distanceObj.sort(function(a,b) {
    return parseInt(a.distance) - parseInt(b.distance)
});

$.each(distanceObj, function(a, b) {
    $('#groups').append('<li>' + b.location + ': ' + b.distance + 'm</li>');
});

console.log(distanceObj);

function hesapla(meineLongitude, meineLatitude, long1, lat1) {
    erdRadius = 6371;

    meineLongitude = meineLongitude * (Math.PI / 180);
    meineLatitude = meineLatitude * (Math.PI / 180);
    long1 = long1 * (Math.PI / 180);
    lat1 = lat1 * (Math.PI / 180);

    x0 = meineLongitude * erdRadius * Math.cos(meineLatitude);
    y0 = meineLatitude * erdRadius;

    x1 = long1 * erdRadius * Math.cos(lat1);
    y1 = lat1 * erdRadius;

    dx = x0 - x1;
    dy = y0 - y1;

    d = Math.sqrt((dx * dx) + (dy * dy));


    return Math.round(d * 1000);
};

});

Please help me with my JSFIDDLE here:

http://jsfiddle.net/hrsf4p7r/

EDIT: Here is the code of the AJAX call:

$.ajax({
    url: 'mydomain.com/api',
    async: false,
    jsonpCallback: 'callback',
    contentType: 'application/json; charset=utf-8',
    dataType: 'jsonp',
    timeout: 2000,
    success: function (data, response) {
        if (response === 'success') {
            if (data !== undefined && data.result !== undefined) {
                $.each(data.result, function (i, item) {

                })

            }
        }
    }
});

Upvotes: 1

Views: 41

Answers (1)

gen_Eric
gen_Eric

Reputation: 227310

Your AJAX call has a few issues. Cleaning that up should hopefully let you get the data correctly.

$.ajax({
    url: 'mydomain.com/api',

    // You should never use `async: false`
    // P.S. JSONP adds a `<script>` tag, so this does nothing
    //async: false,

    // This will change the request to `mydomain.com/api?callback=result`
    // instead of `mydomain.com/api?callback=<someRandomFunctionName>`
    // You can get rid of this if you set your server to
    // use `$_GET['callback']` when it creates its response
    jsonpCallback: 'result',

    // `contentType` is the `Content-type` of the REQUEST body,
    // it does nothing here
    //contentType: 'application/json; charset=utf-8',

    // jsonp is a "hack" to get around the same-origin policy
    // it adds a `<script>` tag to the DOM to get the data
    // the response should be a function call to the "callback"
    // with the data you want to return
    dataType: 'jsonp',

    timeout: 2000,

    success: function (data) {
        // This is only called on success,
        // so if we're here, we can assume we have the data

        // This is all asynchronous, so you need to put all
        // code that needs access to this inside this callback
        // or use `$.ajax(...).done(function(data){...});`
        $.each(data.result, function(i, v){
            console.log(v.ID);
        });
    }
});

Upvotes: 2

Related Questions