0

Estou chamando uma API, e em certas partes, após a troca de uma opção ela retorna o seguinte erro:

SyntaxError: Unexpected token < in JSON at position 0

Gostaria de saber se é algo na sintaxe do fetch aplicado ou o que é

Segue o código:

document.querySelector("#tipoVeiculo").addEventListener("change", function() {
    let tipoVeiculo = document.querySelector("#tipoVeiculo").value
    document.querySelector("#marcaVeiculo").innerHTML = `<option value="">Selecione um tipo de veículo</option>`
    if (tipoVeiculo != "") {
        let urlMarcas = `https://parallelum.com.br/fipe/api/v1/${tipoVeiculo}/marcas`
        fetch(urlMarcas)
            .then((resposta) => resposta.json())
            .then((marcas) => {
                for(let i = 0; i < marcas.length; i++) {
                    document.querySelector("#marcaVeiculo").innerHTML += `<option value="${marcas[i].codigo}">${marcas[i].nome}</option>`
                }
                document.querySelector("#marcaVeiculo").addEventListener("change", function() { carregarModelos(tipoVeiculo, document.querySelector("#marcaVeiculo").value)})
            })
            .catch((error) => console.log(error))
    }
})

function carregarModelos(tipo, marca) {
    let urlModelos = `https://parallelum.com.br/fipe/api/v1/${tipo}/marcas/${marca}/modelos`
    fetch(urlModelos)
        .then((resposta) => resposta.json())
        .then((modelosData) => {
            for(let j = 0; j < modelosData.modelos.length; j++) {
                document.querySelector("#modeloVeiculo").innerHTML += `<option value="${modelosData.modelos[j].codigo}">${modelosData.modelos[j].nome}</option>`
            }
            for(let j = 1; j < modelosData.anos.length; j++) {
                document.querySelector("#anoVeiculo").innerHTML += `<option value="${modelosData.anos[j].codigo}">${modelosData.anos[j].nome}</option>`
            }
            document.querySelector("#botaoProcurar").addEventListener("click", function() {
                if (tipo != "" && marca != "" && document.querySelector("#modeloVeiculo").value != "" && document.querySelector("#anoVeiculo").value != "") {
                    carregarInformacoesVeiculo(tipo, marca, document.querySelector("#modeloVeiculo").value, document.querySelector("#anoVeiculo").value)
                } else {
                    alert("Preencha todos os campos")
                }
            })
        })
        .catch((error2) => console.log(error2))
}
2
  • Provavelmente o valor de resposta não é JSON. 9/10/2021 às 13:36
  • A única coisa que consegui ver foi um erro no network é 404 (not found)... e ele dá no fetch em si 10/10/2021 às 4:05

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .