ga-wdi-exercises / pbj-project3

[project]
0 stars 2 forks source link

How to pass second argument to success handler (and related questions) #26

Closed tomBeach closed 9 years ago

tomBeach commented 9 years ago

I would like to pass an argument to the self.extractGroupData success function below but am running into clashes with the returned json data. I've tried things like (jsonData, whichGroup) as arguments, resulting in undefined errors for the passed variables. (jsonData is meant to be the API response and whichGroup is a string.) I've never understood how to "capture" the returned json data. Is there a specific jquery method that says THIS IS THE RETURNED DATA?

        this.ajaxRequest = $.ajax({
            url: this.dataSource,                       // markitondemand API
            data: { symbol: symbolString },             // markitondemand API
            // url: this.dataSource + symbolString,     // barchart API
            type: 'GET',
            dataType: 'jsonp',
            crossDomain: true,
            error: self.handleError,
            always: self.handleAlways,
            success: self.extractGroupData,
            context: self
        });

Also, a related question: since we are using jsonp data for some of our queries and it needs a callback function, would I also need to pass the callback as an argument (or is the success function itself the calback?)? I have also tried the ().done and ().fail syntax -- which I understand is the better way -- but behavior is the same (i.e. ng!) Finally, we would like to "burn 20" (get some quality time with one of you guys) around 10 when you can swing it. Thanks!

RobertAKARobin commented 9 years ago

Your handleError function will automatically be passed the data. Something like this:

function handleError(data){
  console.log("Here's the data!");
  console.log(data);
}
RobertAKARobin commented 9 years ago

Yes, you can specify the callback as an argument. Check out the "jsonpCallback" section here:

http://api.jquery.com/jquery.ajax/

That said, for cross-domain requests, I would strongly encourage you to make your requests on the back-end. That way, you won't be banging your head against all this stupid "cross-domain" stuff which has eaten away days of my life in the past (but I'm not bitter).

That is, create a new route on your back-end that makes an HTTP request to the other site, and then make an AJAX request to that route:

app.get("/apiRequest", function(req, res){
  request("http://api.com", function(error, apiResponse, data){
   res.json(data);
  });
});
RobertAKARobin commented 9 years ago

Here's a crappy example of how a callback function gets "automatically" passed an argument.

function somethingAsynchronous(myCallback){
  var data = "Totally just got this data from an API";
  myCallback(data);
}

function processData(apiData){
  console.log("Here's my data!");
  console.log(apiData);
}

function mainProcess(){
  somethingAsynchronous(processData);
}
RobertAKARobin commented 9 years ago

As for meeting up with you all at 10, sure! Can you give us an idea of what specifically you'd like help with so we can figure out who'd be the best instructor for the job?

tomBeach commented 9 years ago

Specifically looking for a review of our ajax processing code: explain use of callback with jsonp, use of methods and arguments with $.ajax, passport issues (though that could be done in a second 20 period)

RobertAKARobin commented 9 years ago

I FIGURED IT OUT! I'm not going to tell you how long this took me.

The big difference: using getHistory.jsonp instead of getHistory.json.

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

$(document).ready(function(){

$.ajax({
  dataType: "jsonp",
  url: "http://marketdata.websol.barchart.com/getHistory.jsonp?key=5c566d2e239b7f0d6f2c73f38a767326&symbol=GOOG&type=daily&startDate=20140822000000",
  jsonpCallback: "processData"
});

});
englep10 commented 9 years ago
function $.ajax(myCallback){
  var data = "Totally just got this data from an API";
  myCallback(data);
}

function processData(apiData){
  console.log("Here's my data!");
  console.log(apiData);
}

$.ajax({
  success: processData
});