Getting data from ajax response?

JavaScript
1

i want the value from ajax response but it returning undefined.How i can get the data from ajax scope to outside.

 var value;
  //ajax part

     $.ajax(
      
        
        {
         
         url : url,
         type : 'post',
         data : {id},
         dataType: 'json',
         success : function(response){
            
            value = response.company;
         }
     });

  //ajax ends
  modal.find('.modal-title').text('New message to ' + value);
2

You can’t as it’s asynchronous. If you want to do anything with it, you need to do it in a callback.

1 Like
3

How?

4

Because it’s asynchronous, javascript will fire off the ajax request, then immediately move on to execute the next bit of code, and will probably do so before the ajax response has been received.

Take the section you’ve marked ‘ajax ends’ and put it in your ajax callback function:

success : function(response){
            value = response.company;
            modal.find('.modal-title').text('New message to ' + value);
         }
3 Likes
5 
$.ajax({
         url : url,
         type : 'post',
         data : {id},
         dataType: 'json',
         success : function (response) {
                doSomethingWith(response.company)
         }
})
2 Likes
6 
function my_magic_function(var)
{
       //modal.find('.modal-title').text('New message to ' + var);
      console.log(var);
}

#####################################

 success : function(response){
            
            value = response.company;

              my_magic_function(value);

         }

I think you can do that. You might want to put some conditional statements in the function e.g. if var is empty don’t do anything.

It’s shorthand code so I don’t expect it work as it is, but it explains how…

Hope this helps?

1 Like
7

If you care about developer convenience, you could write your code with async/await.
Since jQuery 3.x, $.ajax returns Promises - which is a browser-builtin technology to manage asynchronous code.

So instead of infinitely nesting your callbacks (you will get tired of callbacks once you have to fetch resources after fetching, because your data is dependend) you could also use .then() and .catch()

Example:

$.post(url).then(function(data) { modal.find('.modal-title').text(data.company)})

Since the javascript community and specification LOVES promises - they are built into every browser by now, they invented syntax to make this even easier:

async function setModalTitle() {
    var response = await $.post(url)
    modal.find('.modal-title').text('New message to ' + response.company)
}

1280×770 37.4 KB

This way, you can write your javascript as if it were synchronous. Without needing to wrap something in callbacks etc.

By the way, this “async” function also returns a Promise.
Which means it can be awaited by another async function:

async function updateModal() {
    await setModalTitle()
    console.log('done!')
}

async/await is supported in all modern browsers: https://caniuse.com/#feat=async-functions
If you do care about backwards compatibility with IE, but want that developer comfort, there are tools (webpack, parcel, babel) to automate transforming the code into IE understandable code.

1 Like
8

If you care about developer convenience, you could write your code with async/await.
Since jQuery 3.x, $.ajax returns Promises - which is a browser-builtin technology to manage asynchronous code.

If you’re going to use async/await, you don’t need to use jQuery. Fetch API is promise based already and is a native function in the same browsers where async/await is available.

https://caniuse.com/#search=fetch

Even if you are needing to support IE11, then there is a simple Polyfill that is maintained by github. You can still use Promises without async/await.

Beyond just $.ajax(), there is very little reason to use jQuery if you’re supporting IE11+.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.