API error Table FIPE

0

I am using an API to consume data from the FIPE table for a form's fill-in. I can consume the field of Tag and Year , however, the error field.

Documentation link: link

Follow the code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(document).ready(function(){varurlBase="https://fipe.parallelum.com.br/api/v1/carros/marcas";
  
/** Marcas**/ 
		
		$.getJSON(urlBase, function(data) {
    var items = ["<option value=\"\">ESCOLHA UMA MARCA</option>"];
    $.each(data, function(key, val) {
      items += ("<option value='" + val.codigo + "'>" + val.nome + "</option>");
    });
    $("#marcas").html(items);
  });
  
		/** Veiculo**/ 
	
		$("#marcas").change(function() {
    $.getJSON(urlBase + "/" + jQuery("#marcas").val() + "/" + "modelos", function(data) {
      var items = ["<option value=\"\">ESCOLHA UM VEICULO</option>"];
      $.each(data, function(key, val) {
        items += ("<option value='" + val.codigo + "'>" + val.nome + "</option>");
      });
      $("#modelos").html(items);
    });
  });
  
		/** Ano**/ 
		
		$("#veiculos").change(function() {
    $.getJSON(urlBase + "/" + jQuery("#marcas").val() + "/" + "modelos" + "/" + jQuery("#modelos").val() + "/" + "anos", function(data) {
      var items = ["<option value=\"\">ESCOLHA O ANO</option>"];
      $.each(data, function(key, val) {
        items += ("<option value='" + val.id + "'>" + val.name + "</option>");
      });
      $("#ano").html(items);
    });
  });
});
	</script>
</head>

<body>
  <select id="marcas">
        </select>
  <select id="modelos">
        </select>
  <select id="ano">
        </select>
</body>
</html>

If someone can give me a light, I will be very grateful. Thank you.

    
asked by anonymous 09.03.2018 / 01:32

1 answer

3

Try this code:

    $(document).ready(function() {
      var urlBase = "//fipe.parallelum.com.br/api/v1/carros/marcas";

      /** Marcas**/

      $.getJSON(urlBase, function(data) {
        var items = ["<option value=\"\">ESCOLHA UMA MARCA</option>"];
        $.each(data, function(key, val) {
          items += ("<option value='" + val.codigo + "'>" + val.nome + "</option>");
        });
        $("#marcas").html(items);
      });

      /** Veiculo**/

      $("#marcas").change(function() {
        $.getJSON(urlBase + "/" + jQuery("#marcas").val() + "/" + "modelos", function(data) {
          var items = ["<option value=\"\">ESCOLHA UM VEICULO</option>"];
          $.each(data.modelos, function(key, val) {
            items += ("<option value='" + val.codigo + "'>" + val.nome + "</option>");
          });
          $("#modelos").html(items);
        });
      });

      /** Ano**/

      $("#modelos").change(function() {
        $.getJSON(urlBase + "/" + jQuery("#marcas").val() + "/" + "modelos" + "/" + jQuery("#modelos").val() + "/" + "anos", function(data) {
          var items = ["<option value=\"\">ESCOLHA O ANO</option>"];
          $.each(data, function(key, val) {
            console.log(data)
            items += ("<option value='" + val.codigo + "'>" + val.nome + "</option>");
          });
          $("#ano").html(items);
        });
      });
    });
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Documento sem título</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><selectid="marcas">
  </select>
  <select id="modelos">
  </select>
  <select id="ano">
  </select>
</body>

</html>

Tidy Points:

It was arranged that it was not calling the array;

{"modelos":[{"nome":

Starts with templates .

So when it's time to call, you need to tell which array;

data.modelos

Something else, in $('#veiculos') I switched to $("#modelos").change(function() {

    
09.03.2018 / 02:55