Sending variable from one ajax call to the next

Question

I have an API I'm trying to query which requires an initial request to generate the report, it returns a report ID and then in 5 seconds you can pull it from that report ID.

This is what I have which works perfectly and returns the reportID:

$(document).ready(function(){
    $("#r2").click(function(){
        $.ajax({
        url: "report.php", 
        dataType: 'json',
        data: { 
            type: 'queue', 
            ref: 2
        },
        success: function(result){
            console.log(result.reportID);
        }});
    });
});

It returns this:

{"reportID":1876222901}

I'm trying to make it call another ajax call on the back of the first one to collect the report using the reportID as the data varaible "ref". So for example, the second ajax query should have ref: 1876222901

$(document).ready(function(){
    $("#r2").click(function(){
        $('#loading').show();
        $.ajax({
        url: "report.php", 
        dataType: 'json',
        data: { 
            type: 'queue', 
            ref: 2
        },
        success: function(result){
            console.log(result);
            $.ajax({
            url: "report.php", 
            dataType: 'json',
            data: { 
            type: 'get', 
            ref: result.reportID
            },
            success: function(result){
                console.log(result);
            }
            });
        }});
    });
});

What I am stuck with is the way I am passing the variable from the result of the first ajax call to the second. It doesn't seem to make it there. How should I send my report ID 1876222901 into my second ajax call please?

Answer 1

You can do this without jQuery just using browser built-in DOM APIs and the fetch API

const r2 = document.getElementById('r2')
const loading = document.getElementById('loading')

const handleAsJson = response => response.json()

const fetchRef = ({reportId}) =>
  fetch(`report.php?type=get&ref=${reportId}`)

document.onready = () => {
  r2.addEventListener('click', () => {
    loading.show();
    // you don't have to interpolate here, but in case these
    // values are variable...
    fetch(`report.php?type=${'queue'}&ref=${2}`)
      .then(handleAsJson)
      .then(fetchRef)
      .then(handleAsJson)
      .then(console.log)
  })
}

Answer 2

The solution is instead of writing

ref: result.reportID

You have to write it like this

ref: result.reportID.reportID

Because as your said, the first time you use console.log(result.reportID) the result is {"reportID":1876222901} . Which means you have to chaining dot notation twice to be able to reach the value 1876222901 in the next ajax call.

To be clear:

 $(document).ready(function(){ $("#r2").click(function(){ $('#loading').show(); $.ajax({ url: "report.php", dataType: 'json', data: { type: 'queue', ref: 2 }, success: function(result){ console.log(result); // as you said, console.log(result.reportID) return {"reportID":1876222901} $.ajax({ url: "report.php", dataType: 'json', data: { type: 'get', ref: result.reportID //which means, this line would be => ref: {"reportID":1876222901} // we will correct it like this => ref: result.reportID.reportID // then we properly get => ref:1876222901 }, success: function(result){ console.log(result); } }); }}); }); }); 

Hopefully it fixes your error.

Answer 3

I think you can try to make another function for calling after your first ajax like

$(document).ready(function(){
    $("#r2").click(function(){
        $.ajax({
        url: "report.php", 
        dataType: 'json',
        data: { 
            type: 'queue', 
            ref: 2
        },
        success: function(result){
            console.log(result.reportID);
            callSecondAjax(result.reportID)
        }});
    });
});

now make that function like

function callSecondAjax(reportId){
// do some stuff 
}