title: General direction rails external API
body: <p>I am working on a rails app that uses the Edmunds external API. <a href="http://developer.edmunds.com/" rel="nofollow noreferrer">http://developer.edmunds.com/</a></p>
  
  <p>On the home page I am trying to create a dynamic select dropdown box. Here is the sequence of events.</p>
  
  <p>1) On Home page load, a select dropdown is populated with all new car <em>makes</em> (Toyota, Honda etc.)</p>
  
  <p>2) When a user chooses a specific car make, a second select dropdown appears with the list of all the car <em>models</em> specific to the make. (Camry, Accord etc.)</p>
  
  <p>3) The same sequence occurs for the specific trim and style of the car. The end result is a specific car( Toyota Camry LE 2DR).</p>
  
  <p>4) The user clicks the submit button and the attributes of the car are saved to the Car model with the same corresponding attributes. </p>
  
  <p>I am looking for a high level overview of the best way to go about this.</p>
  
  <p>Currently, I have the dynamic select box behavior working correctly. The problem is that it's all Jquery and makes an AJAX call every time a new make is selected.</p>
  
  <pre><code>$.ajax({
    type: "GET",
    url: "http://api.edmunds.com/api/vehicle/v2/makes?fmt=json&amp;state=new&amp;api_key=" + edmunds_api_key,
    dataType: "jsonp",
    success: function(data) {
      var makeArray = data.makes;
      console.log(data.makes);
      $.each(makeArray, function(index, value) {
        $('#make_id').append('&lt;option value="' + value.name + '"&gt;' + value.name + '&lt;/option&gt;');
      });
    }
  });
  
  $(document).on('change', '#make_id', function() {
    retrieve_model(this.value);
  });
  
  function retrieve_model(make) {
    $.get('https://api.edmunds.com/api/vehicle/v2/' + make + '/models?  fmt=json&amp;api_key=' + edmunds_api_key, function(data) {
      var modelArray = data.models;
      console.log(data.models);
      $('#model_id').empty();
      $.each(modelArray, function(index, value) {
        $('#model_id').append('&lt;option&gt;' + value.name + '&lt;/option&gt;');
      });
    });
  }
  </code></pre>
  
  <p>I know that there is a better way to do this. I'm just not sure how to do it or what the best practices are when implementing this sort of application.</p>
  
  <p>Looking for general guidance on how one would go about a project as described.</p>
  
  <p>On the Home page load, can I make 1 call and then use that data throughout? Rather than making multiple unnecessary calls.</p>
  
  <p>I did find many previous posts about this topic. Such as.. <a href="https://stackoverflow.com/questions/15313535/using-activerecord-interface-for-models-backed-by-external-api-in-ruby-on-rails?rq=1">Using ActiveRecord interface for Models backed by external API in Ruby on Rails</a></p>
  
  <p>Most were either over my head or for older versions of Rails. Any advice?</p>