How to make an AJAX request to get a word and store the variable globally

Question

I need to make an AJAX request to API to get the word for a hangman game. Also struggling, on reading the word length and displaying it with placeholders. I referenced this link enter link description here , but am still stuck.

//function to get the word from the API using AJAX
  jQuery.extend({
getValues: function(url) {
    var result = null;
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'xml',
        async: false,
        success: function(data) {
            result = data;
        }
    });
   return result;
}
});

//accessing global variable (word)
var results = $.getValues("https://hangman-api.lively.software");
  for (var i < 0; i < word.length; i++) {
    results[i] = "_";
  }

Possible duplicate of [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) — Andrew Lohr, Oct 16 '19 at 18:44
@Rachel Willows take a look at the link above to get some context of async calls, you can wrap your for loop in a function, then call that function from the success handler of the ajax call and pass the result. Also I would suggest to never use `async:false` since it is blocking and can hurt your user experience by slowing down your game. Also unless there is some other context of your game, it seems unnecessary to extend jquery with the getValues function. Just use the ajax call by itself. — Andrew Lohr, Oct 16 '19 at 18:46

hifebriansyah · Answer 1 · 2019-10-16T19:36:29.267

1

Hopefully my snippet can help you in some ways. have a nice day!

$(function(){
    $.ajax({
        url: "https://hangman-api.lively.software/",
        type: 'get',
        success: function(data) {
          //how to access word
          console.log(data.word)

          //how to create placeholders
          placeHolder = " _ ";
          placeHolders = placeHolder.repeat(data.word.length)

          //how to print place holder
          $(".placeHolder").text(placeHolders)
        }
    });

})

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  Placeholders : <span class="placeHolder"></span>
</body>
</html>

edited Oct 16 '19 at 19:36

answered Oct 16 '19 at 19:00

hifebriansyah

341
1
6

This is a horrible answer. Newer use `async: false,` Your browser just freeze. If you want to wait for response use promises. – SouXin Oct 16 '19 at 19:09
Could you possibly give me pseudo code for promting the user to select between easy "3-5", medium "6-9", and hard "10-15" based on the word length. The program would then display a word that meets the length specified in the difficulty. – Rachel Willows Oct 16 '19 at 19:14
@SouXin hi, thanks for your input, i've updated my code, hope you like it :) – hifebriansyah Oct 16 '19 at 19:37
@hifebriansyah did you see my above comment? – Rachel Willows Oct 16 '19 at 19:50
@RachelWillows hi, sorry imnot sure, but maybe you can simply use input:radio then request the api using the parameter based on user input:radio selection. – hifebriansyah Oct 16 '19 at 20:00
This is much better. – SouXin Oct 16 '19 at 21:04

How to make an AJAX request to get a word and store the variable globally

1 Answers1