If you're looking to integrate Jquery with AngularJS, I have some useful code snippets that might come in handy.
For fetching Vehicle Details (New, Used, Future) using Jquery, you can utilize the following code snippet:
<!--Form Details to display year/make/model in dropdown -->
<form method="POST" action="one123.php">
<select id="ajYears" name="ajYears">
</select>
<select id="ajMakes" name="makes" disabled="disabled">
<option>Select Make</option>
</select>
<select id="ajModels" name="models" disabled="disabled">
<option>Select Model</option>
</select>
<select id="ajStyles" name="styles" disabled="disabled">
<option>Select Trim</option>
</select>
<input type="submit" value="submit">
</form>
<!--Script to fetch details from API-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery.noConflict();
</script>
<!-- js code -->
<script>
var protoCall = "https://";
var host = "api.edmunds.com";
// Please ensure to replace the placeholder with your own API KEY
var apiKey = "API KEY";
var fmt = "json";
var standardParams = "&fmt=" + fmt + "&api_key=" + apiKey + "&callback=?";
var $yearSelect = jQuery('#ajYears');
var $makeSelect = jQuery('#ajMakes');
var $modelSelect = jQuery('#ajModels');
var $styleSelect = jQuery('#ajStyles');
// Attaching event listeners on document.ready.
jQuery(function(){
$yearSelect.on('change', function() { getMakeModelsByYear()});
$makeSelect.on('change', function() { enableModelDropdown() });
$modelSelect.on('change', function() { getStyles() });
// Building the year drop down.
ajEdmundsBuildYear();
});
// Method to populate the year drop down.
function ajEdmundsBuildYear()
{
var baseYear = 1990,
endYear = new Date().getFullYear();
$yearSelect.empty();
$yearSelect.append('<option value="-1">Select Year</option>');
for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
{
$yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');
}
}
// Fetching makes and models based on selected year.
function getMakeModelsByYear()
{
var year = $yearSelect.val(),
endPoint = "/api/vehicle/v2/makes",
view = "basic",
options = "year=" + year + "&view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
// Clear make drop down, add first option, and remove 'disabled' attribute.
$makeSelect.empty();
$makeSelect.append('<option value="-1">Select Make</option>');
$makeSelect.removeAttr('disabled');
$modelSelect.empty();
$modelSelect.append('<option value="-1">Select Model</option>');
// Loop through makes and their models, populate corresponding dropdowns.
jQuery.each(data.makes, function(i, val) {
make = data.makes[i];
$makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
jQuery.each(make.models, function(x, val){
model = make.models[x];
$modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');
});
});
});
}
// Update model dropdown to show only matching models for selected make.
function enableModelDropdown()
{
var make = $makeSelect.val();
$modelSelect.removeAttr('disabled');
$modelSelect.find('option').not('[value="-1"]').hide();
$modelSelect.find('option[make=' + make + ']').show();
}
// Retrieve styles related to selected year, make, and model.
function getStyles()
{
var year = $yearSelect.val(),
make = $makeSelect.val(),
model = $modelSelect.val(),
endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
view = "basic",
options = "view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
$styleSelect.empty();
$styleSelect.removeAttr('disabled');
$styleSelect.append('<option value="-1">Select Style</option>');
jQuery.each(data.styles, function(i, val) {
style = data.styles[i];
$styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
});
});
}