handling a jsonp callback in an ember component

Question

I have a jsonp request to retrieve feature information via geoserver, the call looks something like this:

import Ember from 'ember';

export default Ember.Component.extend({

  _selectParcel: function() {

    function handleJson(data){
      console.log(data);
    }

    $.ajax('url/geoserver/wms', {
      type: 'GET',
      data: {
      service: 'WFS',
      version: '1.1.0',
      request: 'GetFeature',
      typeName: 'name_here',
      maxFeatures: 10000,
      outputFormat: 'text/javascript',
      srsname: 'EPSG:4326',
      bbox: '-73.68229866027832, 40.97056664236637, -73.68229866027832, 40.97056664236637, EPSG:4326'
    },
      dataType: 'jsonp',
      jsonpCallback: 'callback:handleJson',
      jsonp: 'format_options'
    });

  }
});

The problem that I run into is dealing with the callback scope - in this case, handleJson()

I have also tried

.then(function(){});

after the ajax call but with no luck.

_selectParcel is going to be called frequently based on mouse movement.

How should the jsonp callback be handled within the Ember component?

I've seen this using ember data with jsonp but im not sure how to interact with an adapter from the component.

Console errors look like : "Uncaught ReferenceError: handleJson is not defined" the way its written above - and "Uncaught ReferenceError: parseResponse is not defined" when using callback=? and a ".then(function(){})" promise

Answer 1

Okay, so there are really 2 pieces here.

1. should ember components request data
2. how are geoserver jsonp requests handled

For the first one I found this write up helpful Should Components Load Data

For the second, this bit where the format_options and the jsonpCallback keys match did the trick. Thank you to this link

$.ajax('url/geoserver/wms', {
    type: 'GET',
    data: {
      service: 'WFS',
      version: '1.1.0',
      request: 'GetFeature',
      typeName: 'name_here',
      maxFeatures: 10000,
      outputFormat: 'text/javascript',
      srsname: 'EPSG:4326',
      bbox: '-73.68229866027832, 40.97056664236637, -73.68229866027832, 40.97056664236637, EPSG:4326',
      format_options: 'callback:getJson'
    },
    dataType: 'jsonp',
    jsonpCallback: 'getJson'
  }).then(function(data) {
    console.log(data);
  });