Achieving results from a function using AJAX to assign them to a variable

Question

Achieving results from a function using AJAX to assign them to a variable

I have a scenario where I am attempting to assign a variable from an AJAX call that triggers a function. The code snippet below successfully logs imgurlthumbvar in the console, but when I try to display it using an alert, it shows up as undefined. After doing some research, I discovered that this issue is likely related to the asynchronous nature of AJAX. Can anyone provide assistance with this? Thank you in advance!

function fetchImage(id){
    $.ajax({
        url:'getphotos.php',
        type:'POST',
        dataType: "JSON",
        data:{id:id},
        success: function(result){
            $.each(result, function(){
                imgurl = this.imgurl;
                imgurlthumb = this.imgurlthumb;
                console.log(imgurlthumb)
                return imgurlthumb 
            })
        }
    });
}

$('#test123').click(function(){
    var test = fetchImage(7)
    alert(test)
})

javascript ajax function variables

Answer 1

Answer №1

Give it a shot

function displayImages(id) {
    return $.ajax({
        url: 'fetchphotos.php',
        type: 'POST',
        dataType: "JSON",
        data: {
            id: id
        }
    });
}
// Using AJAX to fetch data


$('#clickme').click(async function(){
    var result = await displayImages(7); // Result from AJAX call
    var imageURL;
    $.each(result, function(){
        imgURL = this.imgurl;
        thumbUrl = this.imgurlthumb;
        console.log(thumbUrl)
        //console.log('test')
        imageURL = thumbUrl 
    })

    alert(imageURL)
});

Await transforms an asynchronous call into something that resembles synchronous behavior without actually blocking the execution (sync calls can cause UI freezing)

Answer 2

Give it a shot

function displayImages(id) {
    return $.ajax({
        url: 'fetchphotos.php',
        type: 'POST',
        dataType: "JSON",
        data: {
            id: id
        }
    });
}
// Using AJAX to fetch data


$('#clickme').click(async function(){
    var result = await displayImages(7); // Result from AJAX call
    var imageURL;
    $.each(result, function(){
        imgURL = this.imgurl;
        thumbUrl = this.imgurlthumb;
        console.log(thumbUrl)
        //console.log('test')
        imageURL = thumbUrl 
    })

    alert(imageURL)
});

Await transforms an asynchronous call into something that resembles synchronous behavior without actually blocking the execution (sync calls can cause UI freezing)

Achieving results from a function using AJAX to assign them to a variable

Answer №1

Similar questions

Tips for creating child divs with a width that spans the entire page

Incorporating a Third-Party JavaScript Library with Vue.js

What is the best way to eliminate the background color from one span after selecting a different one?

How can I integrate various datasets using AJAX in jQuery?

Is there a way to trigger Material-UI SpeedDialAction onClick events only when the SpeedDial is open and clicked, not when it is hovered over?

Transform a complex PHP array into JSON format using JavaScript

Error message in Angular 2: Deletion operation is restricted

Stop users from being able to copy text on their smartphones' internet browsers

Display the initial three image components on the HTML webpage, then simply click on the "load more" button to reveal the subsequent two elements

Unresponsive Three.js OrbitControls

Error in Node.js child_process: unable to access the property '_writableState' as it is undefined

Rollup.js with Vue.js displays an HTML comment instead of rendering Vue HTML content

Utilize the data storage API within Next.js or directly in the user's

Modify the state of a separate component in React when an onClick event occurs

Using Firebase to loop through elements is made possible with ng

The $.get route is failing to execute on the server-side, resulting in no data being retrieved. The server is not logging any information about this

The Bootstrap navigation bar drop-down feature is not displaying the menu

Reload the Node.js webpage

The angularjs response data is mysteriously missing from the console display

jQuery experiences difficulty in sending arrays in the JSON content type