Passing GET data from one function to another

Question

I'm trying to pass some data from one function to another. I have made a successful AJAX call and got the data. But what I can't figure out now is how to pass that data to another function.

'use strict'

$(document).ready(function() {
    console.log('Page Ready');

    changeColor();
    getData();
});


function getData(data) {
    var root = 'http://jsonplaceholder.typicode.com',
    data;

    data = $.ajax ({
        url: root + '/posts/1',
        type: 'GET',
        success: function(data) {
            console.log(data.body);
        }
    });
}

function changeColor(data) {
    $('button').on('click', function() {
        $('.classy').toggleClass('blue');
        $('.classy').append(data.body);
    });
}

Is someone able to advise how I can get the data from getData and pass it to changeColour ?

Answer 1

Just call the changeColor method in the ajax success and pass the data. Removed the data variable from getData as there was no need for it.

'use strict'

$(document).ready(function() {
    console.log('Page Ready');

    changeColor();
    getData();
});


function getData() {
    var root = 'http://jsonplaceholder.typicode.com';

    $.ajax ({
        url: root + '/posts/1',
        type: 'GET',
        success: function(data) {
            console.log(data.body);
            changeColor(data); //Just call the method here
        }
    });
}

function changeColor(data) {
    $('button').on('click', function() {
        $('.classy').toggleClass('blue');
        $('.classy').append(data.body);
    });
}

Answer 2

Merely invoke your changeColor() function from success: function.

function getData(data) {
    var root = 'http://jsonplaceholder.typicode.com',
    data = $.ajax ({
        url: root + '/posts/1',
        type: 'GET',
        success: function(data) {
            console.log(data.body);
            changeColor(data);
        }
    });
}

Note that I dropped your simple data; line, which has no sense.

Answer 3

You could put the changeColor function into the success call of the getData function.

function getData(data) {
    var root = 'http://jsonplaceholder.typicode.com',
    data;

    data = $.ajax ({
    url: root + '/posts/1',
        type: 'GET',
        success: function(data) {
            console.log(data.body);
            changeColor(data);
        }
    });
}

Answer 4

You basically have two options: call the changeColor function from within the success function, or in your success function store the data in a variable that can be accessed elsewhere (either directly by changeColor or passed into changeColor).

The second option can be achieved by either accessing a global variable (not really a good idea), or passing in an object that will then be passed into changeColor. Which one is best really depends upon your usage.