title: How to get and display JSON API data with JavaScript
body: <p>I am a beginner learning web development. I am trying to create a web app based on HTML, CSS, and JavaScript, which:</p>
  
  <ol>
  <li>Receives input from a user through an input field</li>
  <li>Retrieves JSON data through an external API</li>
  <li>Displays the results below the input field.</li>
  </ol>
  
  <p>After some research, my conclusion was that Node.js, Bootstrap and Heroku would be a good setup to do this. However, I am currently stuck when it comes to calling and displaying the data from API.</p>
  
  <ul>
  <li>My website: <a href="https://mighty-depths-36862.herokuapp.com" rel="nofollow noreferrer">https://mighty-depths-36862.herokuapp.com</a></li>
  <li>The API I am trying to call: <a href="http://apis.is/car?number=aa031" rel="nofollow noreferrer">http://apis.is/car?number=aa031</a></li>
  </ul>
  
  <p>In the API instructions, the following code is supplied as "jQuery demo":</p>
  
  <pre><code>$.ajax({
    'url': 'http://apis.is/car',
    'type': 'GET',
    'dataType': 'json',
    'data': {'number': 'aa031'},
    'success': function(response) {
      console.log(response);
    }
  });
  </code></pre>
  
  <p>I used this to create the following .js file, which I reference at the bottom of my html body contents, alongside jQuery:</p>
  
  <pre><code>$( document ).ready(function() {
      $.ajax({
          'url': 'http://apis.is/car',
          'type': 'GET',
          'dataType': 'json',
          'data': {'number': 'aa031'},
          'success': function(response) {
            console.log(response);
          }
      });
  });
  </code></pre>
  
  <p>Everything seems to run correctly, but I am a bit lost when it comes to finding out what to do next to make this work:</p>
  
  <ol>
  <li>How can I take the user input from the field and put it in the API query?</li>
  <li>How do I insert the results from the query into the table?</li>
  </ol>
  
  <p>Thank you in advance for any help!</p>