API Fipe - #2

Nessa segunda parte vamos finalizar nossa integração com a API da Fipe trazendo os valores dos veículos, ano e tipo de combustível de acordo com a marca.

Implementando o Ajax

Vamos iniciar implementando a função padrão do ajax e criando as novas funções necessárias:

//Function ajax
function ajaxFunction(action,brandId="",vehicleId="")
{
    $.ajax({
        url: getRoot()+"controller/controllerFipe.php?action="+action+brandId+vehicleId+"",
        type:"post",
        dataType:"json",
        success:function (response) {
            const responseJson=JSON.parse(response);
            for(let i=0; i < responseJson.length; i++){
                $("#"+action).append("<option value='"+responseJson[i].id+"'>"+responseJson[i].name+"</option>");
            }
        }
    });
}

//Get brand
function getBrand()
{
    ajaxFunction("brand");
    $("#brand").on("change",function(){
        $("#vehicles").show();
        getVehicles($(this).val());
    });
}

//Get Vehicles
function getVehicles(brandId)
{
    ajaxFunction("vehicles","&brandId="+brandId);
    $("#vehicles").on("change",function(){
        $("#year").show();
        getYear(brandId,$(this).val());
    });
}

//Get Year
function getYear(brandId,vehicleId)
{
    ajaxFunction("year","&brandId="+brandId,"&vehicleId="+vehicleId);
}

getBrand();

Faremos também as alterações no nosso controller de modo que ele receba as 03 actions existentes (brand, vehicles e year):

if($action=='brand'){
    $objFipe->setUrl("http://fipeapi.appspot.com/api/1/carros/marcas.json");
    echo $objFipe->getUrl();
}elseif($action=='vehicles'){
    $objFipe->setUrl("http://fipeapi.appspot.com/api/1/carros/veiculos/{$brandId}.json");
    echo $objFipe->getUrl();
}elseif($action=='year'){
    $objFipe->setUrl("http://fipeapi.appspot.com/api/1/carros/veiculo/{$brandId}/{$vehicleId}.json");
    echo $objFipe->getUrl();
}

Sucesso nos códigos e na vida!