title: Appending values of json object to input field
body: <p>I am trying to append the values of a json object(<code>name</code> &amp; <code>color</code>)  to two input fields in a form. This is a mockup of an api call being made inside my webserver. The jQuery function takes the value of the first input field, then concatenates the url + json file location and finally makes the api call. The console shows the values are retrieved successfully but I am unsure how to append them accordingly to their input field. <a href="http://webprolearner.ueuo.com/concatenate/" rel="nofollow">SITE</a></p>
  
  <p>Json: </p>
  
  <pre><code>{
      "name": "test1",
      "color": "red",
  }
  </code></pre>
  
  <p>jQuery/AJAX</p>
  
  <pre><code>$(document).ready(function() {
  
    /** get the inputs we might need */
    var $result = $('#result');
    var $input = $('#input');
  
    $result.data('url', $result.val());
  
    var timer;
  
    /** function to submit data to the server and
        update the result input on success */
    function submitForm( input, newValue) {
      $.ajax({
        type: "GET",
        url: newValue,
        data: {input:input},
        dataType: 'json',
        success: function (data) {
          $result.val(newValue);
        }
      });
    };
  
    /** on key up, fill #result with the url + input */
    $input.bind('keyup', function() {
      var $this = $(this);
      var inp = $this.val();
      var url = $result.data('url');
      var newValue = url + inp + '/info.json';
  
      if(timer) { clearTimeout(timer); }
      timer = setTimeout(function(){
        submitForm(inp, newValue) ;
      }, 500);
      return false;
    });
  });
  </code></pre>