0

Based on three function - GET, TRANSFORM and CHANGECHART - how can I chain all three through callbacks? Bearing in mind, that CHANGECHART can be run as a standalone function, when the GET and TRANSFORM are done?

Here is my code: 

    var dts = {};
var chart = {};

function testAjax(callback) {
  $.ajax({
    url:
      "https://api.openweathermap.org/data/2.5/forecast?q=london&appid=7ce3e1102e1902e0f878c2a640e95aed",
    method: "GET",
    cache: false,
    success: callback
  });
}

function transform(data) {
  this.data = data;

  dts = data.list.map(item => item.dt);
  console.log(dts);


}

function changeChart(text, dts) {

 chart.name = text;
 chart.data = dts;

  console.log(chart.data);

};

$('.change').on('click', function() {
  var text = $(this).html();
  changeChart(text, dts);

})

$('.submit').on('click', function() {
  testAjax(transform);
})



console.log(useMe.tempMins); // undefined

Expected results: on click of changeChart, dts variable IS DEFINIED and replaces chart.data object data.

More on codepen: https://codepen.io/anon/pen/zWprar?editors=1011

EDIT: I fixed my code to the point, where I can properly ask for the answer. The problem lies with changeChart function. How can I pass ajax data to it? Please bear in mind, that the logic for the user is to click submit first to fetch the data, followed by change. Also, in the bigger picture there are multiple 'change' buttons that will change bits and pieces from the main data fetched from ajax request.

EstevaoLuis
  • 2,422
  • 7
  • 33
  • 40
J. Doe
  • 37
  • 5
  • You pass `transform` to `testAjax`, but it doesn't take a parameter? – Bergi Apr 01 '18 at 18:13
  • You don't want to call only `transform` after the ajax is done. You want to create a `function transformAndChangeChare(data) { changeChart(transform(data)); }` and use that. – Bergi Apr 01 '18 at 18:14
  • Your `transform` function should `return` the transformed data, and it should not assign to global `this.value` property. Your `changeChart` function takes two parameters but then ignores their values and overwrites them with things from the global `chart` variable. It shouldn't do that either. – Bergi Apr 01 '18 at 18:16
  • You can't chain these because the ajax function is an async function. You'd need to create a thenable function. Your code shows a LOT of errors. I think you have bigger problems to worry about than creating chainable functions. Perhaps create a simpler example of what you're trying to achieve and start from there. Keep in mind that for a function to be chainable it must be a method on an object of which the other chainable functions are methods. You then `return this` from within each function, so that the return has a reference to the object (and thus the methods). Also search stackoverflow. – geoidesic Apr 01 '18 at 18:21
  • @geoidesic "You can't chain these because the ajax function is an async function." So if I fetch the data once, I can`t manipulate it through a number of 'change' functions, based on user clicks? It defeats the purpose of having a chart with loaded data (behind the user eyes), so the user can modify it from front end perspective... – J. Doe Apr 01 '18 at 20:05
  • Using promises? – The Reason Apr 01 '18 at 20:34
  • @geoidesic No, the OP doesn't ask about method chaining. He's asking for chaining ("composing") multiple actions in the ajax callback. – Bergi Apr 01 '18 at 21:44

0 Answers0