getting null value in function variable that assign in ajax success function in javascript

Question

    function getData(url) {
        var responseData = null;
        $.ajax({
          type: "GET",
          url: url,
          crossDomain: true,
          async: false,          
          contentType: "application/json; charset=utf-8",
          dataType: "jsonp",
          success: function (result) {
            responseData = result;
          }
        });   
         console.log(responseData); 
         return responseData;
      }    
     var  getapidata= getData('https://jsonplaceholder.typicode.com/todos/1');
        console.log('getapidata',getapidata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — evolutionxbox, Feb 06 '20 at 14:26
This is not how callbacks work. https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Lain, Feb 06 '20 at 14:27
You're not waiting for the call to be completed before you assign your `getapidata` variable — nopassport1, Feb 06 '20 at 14:29

Aziz.G · Answer 1 · 2020-02-06T14:42:25.740

It's an async event, So you should do something similar this syntaxe may help:

function getData(url) {
  return $.ajax({
    type: "GET",
    url: url,
    crossDomain: true,
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp"
  });
}


var getapidata = getData('https://jsonplaceholder.typicode.com/todos/1').then(value => {
  console.log(value)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Priyanshu · Answer 2 · 2020-02-06T17:15:23.130

I think you don't want to write $.ajax syntax every time when you need to send ajax call. if so then this code can help you.

Note You should must learn how JavaScript asynchronously works because the which you have written will never work.

Here is my code in which i have add some more functionality.
1) dynamically set URL and Methods
2) Now you can GET, POST, PUT, PATCH, DELETE using getData() function

getData() function required two parameter and one optional parameter depending upon you need to send data on server or not.

getData(URL, Method, Data if there)

$(document).ready(async () => {
    function getData(url, method, data = {}) {
    return $.ajax({
      method,
      url,
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
    });
 }
 // getData(URL, Method, Data)

 //  await getData('https://jsonplaceholder.typicode.com/posts/1', 'PATCH', {title: "new post"})
 //  await getData('https://jsonplaceholder.typicode.com/posts/1', 'DELETE')
 //  await getData('https://jsonplaceholder.typicode.com/posts', 'POST', {
 //  userId: Math.floor(Math.random() * 1000),
 //  title: "New Post", 
 //  body: "This is my new post"
 // })

 var getapidata = await getData('https://jsonplaceholder.typicode.com/posts/1', 'GET')
 console.log(getapidata)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Thank you

getting null value in function variable that assign in ajax success function in javascript

2 Answers2