CODEWITHSUNDEEP
jqueryjsonember.js
Kinari
Kinari

Reputation: 178

Jquery/Ember object iteration

I have an ember app with that shows jobs positions. Im trying to filter those jobs positions depending of the ip location.

Im using geonames for searching the state based in the latitude and longitude of the request.

The api request is made in 

var state=StateAdapter.getState(location);

Then, i print the result

 console.log(state);

I have this returning object state:

Object {readyState:1 }
abort: ( statusText )
always: ()
complete: ()
done: ()
error: ()
fail: ()
getAllResponseHeaders: ()
getResponseHeader: ( key )
overrideMimeType: ( type )
pipe: ( /* fnDone, fnFail, fnProgress */ )
progress: ()
promise: ( obj )
readyState: 4
responseJSON: Object
responseText: "{"geonames":     [{"adminCode2":"039","countryName":"Mexico","adminCode1":"19","lng":"-100.29265","adminName2":"Monterrey","fcodeName":"populated place","adminName3":"","distance":"1.07626","timezone":{"dstOffset":-5,"gmtOffset":-6,"timeZoneId":"America/Monterrey"},"adminName4":"","adminName5":"","name":"Norte de Monterrey","fcode":"PPL","geonameId":9072770,"asciiName":"Norte de Monterrey","lat":"25.63646","population":0,"adminName1":"Nuevo León","countryId":"3996063","adminId1":"3522542","fclName":"city, village,...","elevation":0,"countryCode":"MX","adminId2":"8582459","toponymName":"Norte de Monterrey","fcl":"P","continentCode":"NA"}]}"
setRequestHeader: ( name, value )
state: ()
status: 200
statusCode: ( map )
statusText: "OK"
success: ()
then: ( /* fnDone, fnFail, fnProgress */ )
__proto__: Object

But when i do this: 

$.each( state, function( key, value ) {
console.log("state["+key +"]" + value);
});

Console doesnt print readyState, responseJSON, responseText, status nor statusText. I need responseText result to filter my model.

What am i doing wrong? Thanks guys.

Upvotes: 0

Views: 97

Answers (1)

Kit Sunde
Kit Sunde

Reputation: 37105

The API response is async. This example would work.

$.ajax("http://api.geonames.org/findNearbyPlaceNameJSON", {
  dataType: 'jsonp',
  data: {
    lat: 25.631590600000003,
    lng: 100.3019204,
    username: "demo",
    style: "full"
  }
}).done(function(response){
  $.each(response.geonames, function(index, geoname){
    console.log(geoname);
  });      
});

You cannot simply return the ajax request, it won't immediately have your data. Instead you would use a promise or a callback. So for instance if you want to wrap that with a promise you could do:

function geoNames(loc){
  console.log(loc);
  return $.ajax("http://api.geonames.org/findNearbyPlaceNameJSON", {
    dataType: 'jsonp',
    data: {
      lat: loc.lat,
      lng: loc.lng,
      username: "demo",
      style: "full"
    }
  })
}

Then:

var loc = {lat: 25.631590600000003, lng: -100.3019204};
geoNames(loc).done(function(response){
  $.each(response.geonames, function(index, geoname){
    $("body").append("<p>" + geoname + "</p>");
  });      
});

Or with a callback:

function geoNames(loc,  callback){
  console.log(loc);
  return $.ajax("http://api.geonames.org/findNearbyPlaceNameJSON", {
    dataType: 'jsonp',
    data: {
      lat: loc.lat,
      lng: loc.lng,
      username: "demo",
      style: "full"
    }
  }).done(callback)
}

Then:

var loc = {lat: 25.631590600000003, lng: -100.3019204};
geoNames(loc, function(response){
  $.each(response.geonames, function(index, geoname){
    $("body").append("<p>" + geoname + "</p>");
  });      
});

Another wholly separate issue is that you shouldn't use location as a variable name. window.location is a browser specific global variable and isn't always overridable. Use loc instead.

Upvotes: 1

Related Questions