Solucionado
Estou trabalhando em um projeto HTML, CSS E JS que precisa ser serverless (rodar direto na máquina como se fosse um documento interativo). Existe alguma forma de eu buscar dados de um arquivo .JSON dentro da própria pasta do projeto ao invés de buscar na internet?
Oi Samuel, tudo bem?
Existe sim! Vamos lá que vou te explicar como fazer. Primeiramente, crie um arquivo .json com o nome de sua preferência, como por exemplo: data.json, e então, popule-o com alguns dados. Veja um exemplo:
[
{"nome" : "Giovanna", "idade" : "20"},
{"nome" : "Leonardo", "idade" : "22"}
]Aqui, o que eu tenho é um array de objetos.
Agora, no arquivo HTML, eu criei apenas um botão, que quando houver o clique, ele irá pegar esses dados do arquivo JSON e trazer para o Javascript. Veja o código HTML abaixo:
<body>
<button>Obter dados</button>
<script type="text/javascript" src="script.js"></script>
</body>E então, no Javascript, precisamos adicionar o evento de clique ao botão:
const button = document.querySelector('button');
button.addEventListener('click', function () {
});Agora, para realizarmos a requisição para o arquivo JSON, podemos utilizar o fetch. A API Fetch fornece uma interface JavaScript para acessar e manipular partes do HTTP, tais como os requisições e respostas. Veja o código abaixo:
button.addEventListener('click', function () {
fetch('./data.json').then(data => data.json()).then(data => console.log(data));
});Basicamente, estamos fazendo uma requisição para o arquivo data.json através do fetch. Ele retorna uma promise, por isso precisamos usar o .then(), para tratar essa promise quando ela for completada. Primeiramente, o método data.json() lê esse arquivo JSON e transforma-o em objeto, e então, o console.log() irá mostrar toda essa resposta, e ela está pronta para ser usada ou manipulada da forma que você preferir.
Espero ter ajudado, bons estudos =)
Esse erro aparece quando tento implementar essa solução:
CRUD_questoes.html:143 Fetch API cannot load file:///C:/xampp/htdocs/botanik/criador%20de%20perguntas/perguntas.json. URL scheme "file" is not supported. (anonymous) @ CRUD_questoes.html:143 CRUD_questoes.html:143 Uncaught (in promise) TypeError: Failed to fetch at HTMLButtonElement. (CRUD_questoes.html:143)
Oi Samuel, pode mandar aqui o seu código dessa implementação para eu conseguir te auxiliar melhor?
Fico no aguardo!