Consumo de JSON com jQuery

by Ivan Ferrer

HTML

<form method="post" action="/enviar" name="formul">
    <div id="form"></div><br>
    <div id="form2"></div>
</form> 
    <br>
<div id="tab"></div>

CSS

#form, #form2 {
  margin-top:10px;
  width:30%;  
  margin-left:10px;  
}

JavaScript

$.getJSON('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas', function(data) {

    var select = '<select name="modelos" class="form-control">\
                  <option>Selecione...</option>';
    for (var i in data) {
        
         select += '<option value="'+data[i].codigo +'">'+ data[i].nome + '</option>';
    
    }
    select += '</select>';
    $('#form').html(select);
    
});

$.getJSON('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/59/modelos', function(data) {
      data = data.modelos;
      var select = '<select name="modelos2" class="form-control">\
                  <option>Selecione...</option>';
    for (var i in data) {
        
         select += '<option value="'+data[i].codigo +'">'+ data[i].nome + '</option>';
    
    }
    select += '</select>';
    $('#form2').html(select);
    
});

$.getJSON('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/59/modelos/5940/anos/2014-3', function(data) {
      var table = '<table class="table table-bordered">\
                      <tr>\
                        <th>Marca</th>\
                        <th>Modelo</th>\
                        <th>Ano de fabricação</th>\
                        <th>Combustível</th>\
                        <th>Valor</th>\
                      </tr>\
                      <tr>\
                        <td>'+data.Marca+'</td>\
                        <td>'+data.Modelo+'</td>\
                        <td>'+data.AnoModelo+'</td>\
                        <td>'+data.Combustivel+'</td>\
                        <td>'+data.Valor+'</td>\
                   </tr>\
                  </table>';
    $('#tab').html(table);
    
});