ermogenes/dados.json

## dados.json
{
    "escola": "Etec Adolpho Berezin",
    "curso": "Informática",
    "componente": "Programação de Computadores II",
    "professores": [
        "Ermogenes",
        "Nicholas"
    ]
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aula Fetch</title>
</head>
<body>
    <h1>Aula Fetch</h1>
    <input type="button" value="Carregar" id="carregar">
    <p id="mensagem"></p>
    <ul id="professores"></ul>
    <script src="index.js"></script>
</body>
</html>

## index.js
function iniciar() {
    const botaoCarregar = document.getElementById("carregar");
    botaoCarregar.addEventListener('click', carregar);
}

async function carregar() {
    // const url = "dados.json";
    const url = "https://gist.githubusercontent.com/ermogenes/b28d49289db135bb5b5f9b0b31f1ba02/raw/657141e8f326352a44338654ebf1f456216070b5/dados.json";

    const resposta = await fetch(url);
    const dados = await resposta.json();

    const mensagem = `Estou estudando ${dados.componente} no curso de ${dados.curso} da ${dados.escola}.`;
    exibir(mensagem, dados.professores);
}

function exibir(mensagem, professores) {
    const paragrafoMensagem = document.getElementById("mensagem");
    paragrafoMensagem.innerText = mensagem;

    const listaProfs = document.getElementById("professores");
    for(const prof of professores) {
        listaProfs.insertAdjacentHTML('beforeend', `<li>${prof}</li>`);
    }
}

document.addEventListener('DOMContentLoaded', iniciar);
	{
	"escola": "Etec Adolpho Berezin",
	"curso": "Informática",
	"componente": "Programação de Computadores II",
	"professores": [
	"Ermogenes",
	"Nicholas"
	]
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Aula Fetch</title>
	</head>
	<body>
	<h1>Aula Fetch</h1>
	<input type="button" value="Carregar" id="carregar">
	<p id="mensagem"></p>
	<ul id="professores"></ul>
	<script src="index.js"></script>
	</body>
	</html>
	function iniciar() {
	const botaoCarregar = document.getElementById("carregar");
	botaoCarregar.addEventListener('click', carregar);
	}

	async function carregar() {
	// const url = "dados.json";
	const url = "https://gist.githubusercontent.com/ermogenes/b28d49289db135bb5b5f9b0b31f1ba02/raw/657141e8f326352a44338654ebf1f456216070b5/dados.json";

	const resposta = await fetch(url);
	const dados = await resposta.json();

	const mensagem = `Estou estudando ${dados.componente} no curso de ${dados.curso} da ${dados.escola}.`;
	exibir(mensagem, dados.professores);
	}

	function exibir(mensagem, professores) {
	const paragrafoMensagem = document.getElementById("mensagem");
	paragrafoMensagem.innerText = mensagem;

	const listaProfs = document.getElementById("professores");
	for(const prof of professores) {
	listaProfs.insertAdjacentHTML('beforeend', `<li>${prof}</li>`);
	}
	}

	document.addEventListener('DOMContentLoaded', iniciar);