How to get random word using Wordnik API in Javascript?

Question

I am trying to create a hangman game using HTML and Javascript and to get the word I was wondering how I might be able to get a random word using the wordnik API.

I do not understand how to get the word and then return in. I've already registered for an apiKey, but I keep getting confused on how to do the AJAX and JSON part of the API and how that combines with the Javascript.

Answer 1

According to a quick search of the docs, you should be able to get a list of random words via:

http://api.wordnik.com:80/v4/words.json/randomWords?hasDictionaryDef=true&minCorpusCount=0&minLength=5&maxLength=15&limit=1&api_key=a2a73e7b926c924fad7001ca3111acd55af2ffabf50eb4ae5

Effectively, you're looking for a list of random words, with a limit of one word (limit=1).

Obviously, use your own api_key rather than the demo key provided in the documentation.

References:

• /words.json/randomWords.

Answer 2

Kinda late, but now everyone it's using React for everything, therefore you can try something like this:

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">

const wordnik = 'https://api.wordnik.com/v4/words.json/randomWord?&minLength=5&maxLength=-1&api_key=';
const API_KEY = '';

class FetchData extends React.Component {
    state = {
      word: '',
    }

    componentDidMount() {
      fetch(wordnik + API_KEY)
      .then(res => res.json())
      // Uncomment here if you have API_KEY
      // .then(json => this.setState({ word: json.word }))

      // Comment here if you have API_KEY
      .then(json => this.setState({ word: json.message }))
      .catch(err => console.log(err.message));
    }
    render() {
        return <h1>{this.state.word}</h1>;
    }
}

ReactDOM.render(<FetchData />, document.getElementById('root'));
</script>

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
const wordnik = 'https://api.wordnik.com/v4/words.json/randomWord?&minLength=5&maxLength=-1&api_key=';
const API_KEY = '';

class FetchData extends React.Component {
    state = {
      word: '',
    }

    componentDidMount() {
      fetch(wordnik + API_KEY)
      .then(res => res.json())
      // Uncomment here if you have API_KEY
      // .then(json => this.setState({ word: json.word }))
      
      // Comment here if you have API_KEY
      .then(json => this.setState({ word: json.message }))
      .catch(err => console.log(err.message));
    }
    render() {
        return <h1>{this.state.word}</h1>;
    }
}

ReactDOM.render(<FetchData />, document.getElementById('root'));
</script>