Maximizing JavaScript efficiency: Returning a value within an if statement in an AJAX call

Question

Maximizing JavaScript efficiency: Returning a value within an if statement in an AJAX call

In my function, I have a condition that checks the idType. If it is 1, an ajax call is made to a php file to retrieve the name associated with the specific idName and return it. Otherwise, another example value is returned.

function obtainName(idName, idType){
   var resultString = ""
   if(idType == 1){
       
       $.ajax({
           type:"GET",
           url:"myFile.php",
           dataType:"JSON",
           data:{idName: idN},
           success: function(data){
              resultString = data.name 
              console.log(resultString)
              return resultString   
           },
           error: function(d){
           
           }
       });

   } else {  
       resultString =  "otherValueName" 
       console.log(resultString)
       return resultString
   }
}

When calling this function with specific id names, get_name is utilized with the corresponding idName and type. The for loop is omitted in this example.

function displayObtainedName(exampleIdName){
    var string= get_name(exampleIdName, 1);
    console.log(string)
    return string
}

Lastly, the name is printed out:

displayObtainedName("Alex");

However, if idType is 1 and triggers an ajax call, the result appears as undefined. In the console, the outcome of the variable "string" in the displayObtainedName function shows as undefined. But the value assigned to the variable "resultString" in get_name is correct.

What can be done to solve this issue?

javascript ajax

Answer 1

Answer №1

If you want to achieve your desired outcome, there is a simple method you can follow. Simply set the ajax call to sync mode. By default, jQuery Ajax calls run in Async mode, but by adding "async: false" as another argument, we can make it run in Sync mode. Here is a functional example of the solution: 1. Return the promise from the function and handle the promise to obtain the result. 2. Use async: false for synchronous execution.

HTML 2. Example JSON data (data.son)

     <!DOCTYPE html>
 <html>

 <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script>
         $(document).ready(function () {

             function get_ContentWay1(idName, idType) {
                 var resultString = ""
                 if (idType == 1) {
                     return $.ajax({
                         type: "GET",
                         url: "data.json",
                         dataType: "JSON",
                         data: { idName: idName },
                         success: function (data) {
                             resultString = data.employee.name;
                             console.log(resultString)
                         },
                         error: function (d) {

                         }
                     });
                 } else {
                     resultString = "otherValueName"
                     console.log(resultString)
                     return new Promise(function (resolve, reject) {
                         resolve(resultString);
                     });
                 }
             }




             function get_ContentWay2(idName, idType) {
                 var resultString = ""
                 if (idType == 1) {
                     $.ajax({
                         type: "GET",
                         url: "data.json",
                         async: false,//You need to pass this
                         dataType: "JSON",
                         data: { idName: idName },
                         success: function (data) {
                             resultString = data.employee.name;
                             console.log(resultString)

                         },
                         error: function (d) {

                         }
                     });
                 } else {
                     resultString = "otherValueName"
                     console.log(resultString)
                 }
                 return resultString;
             }

             $("button.btnWay1").click(function () {
                 var idType = $(this).attr("idType");
                 var idName = $(this).attr("idName");

                 // Way 1
                 var contect = get_ContentWay1(idName, idType).then((result) => {
                     if (result != "otherValueName")
                         $("#div1").html(result.employee.name);
                     else
                         $("#div1").html(result);
                 }).catch((err) => {
                     alert("error");
                 });
             });

             $("button.btnWay2").click(function () {
                 var idType = $(this).attr("idType");
                 var idName = $(this).attr("idName");

                 //Way 2
                 var contect = get_ContentWay2(idName, idType);
                 $("#div1").html(contect);
             });
         });
     </script>
 </head>

 <body>

     <div id="div1">
         <h2>Let jQuery AJAX Change This Text</h2>
     </div>

     <button class="btnWay1" idType="1" idName="abc">Get External Content Way 1</button>
     <button class="btnWay1" idType="2" idName="abc">Don't Get External Content Way 1</button>

     <button class="btnWay2" idType="1" idName="abc">Get External Content Way 2</button>
     <button class="btnWay2" idType="2" idName="abc">Don't Get External Content Way 2</button>

 </body>

 </html>

        {  
        "employee": {  
            "name":       "sonoo",   
            "salary":      56000,   
            "married":    true  
        }  
    }

Answer 2

If you want to achieve your desired outcome, there is a simple method you can follow. Simply set the ajax call to sync mode. By default, jQuery Ajax calls run in Async mode, but by adding "async: false" as another argument, we can make it run in Sync mode. Here is a functional example of the solution: 1. Return the promise from the function and handle the promise to obtain the result. 2. Use async: false for synchronous execution.

HTML 2. Example JSON data (data.son)

     <!DOCTYPE html>
 <html>

 <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script>
         $(document).ready(function () {

             function get_ContentWay1(idName, idType) {
                 var resultString = ""
                 if (idType == 1) {
                     return $.ajax({
                         type: "GET",
                         url: "data.json",
                         dataType: "JSON",
                         data: { idName: idName },
                         success: function (data) {
                             resultString = data.employee.name;
                             console.log(resultString)
                         },
                         error: function (d) {

                         }
                     });
                 } else {
                     resultString = "otherValueName"
                     console.log(resultString)
                     return new Promise(function (resolve, reject) {
                         resolve(resultString);
                     });
                 }
             }




             function get_ContentWay2(idName, idType) {
                 var resultString = ""
                 if (idType == 1) {
                     $.ajax({
                         type: "GET",
                         url: "data.json",
                         async: false,//You need to pass this
                         dataType: "JSON",
                         data: { idName: idName },
                         success: function (data) {
                             resultString = data.employee.name;
                             console.log(resultString)

                         },
                         error: function (d) {

                         }
                     });
                 } else {
                     resultString = "otherValueName"
                     console.log(resultString)
                 }
                 return resultString;
             }

             $("button.btnWay1").click(function () {
                 var idType = $(this).attr("idType");
                 var idName = $(this).attr("idName");

                 // Way 1
                 var contect = get_ContentWay1(idName, idType).then((result) => {
                     if (result != "otherValueName")
                         $("#div1").html(result.employee.name);
                     else
                         $("#div1").html(result);
                 }).catch((err) => {
                     alert("error");
                 });
             });

             $("button.btnWay2").click(function () {
                 var idType = $(this).attr("idType");
                 var idName = $(this).attr("idName");

                 //Way 2
                 var contect = get_ContentWay2(idName, idType);
                 $("#div1").html(contect);
             });
         });
     </script>
 </head>

 <body>

     <div id="div1">
         <h2>Let jQuery AJAX Change This Text</h2>
     </div>

     <button class="btnWay1" idType="1" idName="abc">Get External Content Way 1</button>
     <button class="btnWay1" idType="2" idName="abc">Don't Get External Content Way 1</button>

     <button class="btnWay2" idType="1" idName="abc">Get External Content Way 2</button>
     <button class="btnWay2" idType="2" idName="abc">Don't Get External Content Way 2</button>

 </body>

 </html>

        {  
        "employee": {  
            "name":       "sonoo",   
            "salary":      56000,   
            "married":    true  
        }  
    }

Answer 3

Answer №2

It appears that there is a mistake in your code:

function get_name(idName, idType){
   var resultString = ""
   if(idType == 1){
       
       $.ajax({
           type:"GET",
           url:"myFile.php",
           dataType:"JSON",
           data:{idName: idN}, // You should be passing idName instead of idN
           success: function(data){
              resultString = data.name 
              console.log(resultString)   
           },
           error: function(d){}
       });

   } else {  
       resultString =  "otherValueName" 
       console.log(resultString)
   }

    return resultString;
}

Answer 4

It appears that there is a mistake in your code:

function get_name(idName, idType){
   var resultString = ""
   if(idType == 1){
       
       $.ajax({
           type:"GET",
           url:"myFile.php",
           dataType:"JSON",
           data:{idName: idN}, // You should be passing idName instead of idN
           success: function(data){
              resultString = data.name 
              console.log(resultString)   
           },
           error: function(d){}
       });

   } else {  
       resultString =  "otherValueName" 
       console.log(resultString)
   }

    return resultString;
}

Maximizing JavaScript efficiency: Returning a value within an if statement in an AJAX call

Answer №1

Answer №2

Similar questions

What is the best way to transfer form data to another function without causing a page refresh?

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

jQuery fade in problem or alternate solutions

Getting Info from Eventbrite API Request Parameters

Executing multiple jQuery.ajax() requests in sequence

Exploring Next.js' dynamic routes with an alternative URL approach

Protecting multiple form submissions with a CSRF token

The internal cjs loader in node threw an error at line 1078

When the state of the grandparent component is updated, the React list element vanishes in the grandchild component. Caution: It is important for each child in a list to have a unique

Having trouble retrieving data from Laravel's JSON response object

Can you explain how to utilize prop values for setting attributes in styled-components v4 with TypeScript?

Inconsistencies with AJAX performance

Having trouble with VueJS ref not preventing the default form action on submit?

An invalid primitive was encountered in the JSON data

Determine if an object has been submitted in a MEAN / AngularJS application

"Encountering a 404 error with the angular2-in-memory-web-api

Headers can't be set after they have been sent. This issue arises when calling create(data,cb) function

What is the best way to incorporate a background image in a Bootstrap tooltip?

Obtaining Data from CRM 2011 with the Power of jQuery and JavaScript

I encountered an issue with my PHP script when trying to interpret a JSON file