Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
10
respostas

Erro ao ler arquivo json

Alguem poderia me ajudar? esta dando esse erro e não sei o que é , sempre da erro no send

function SortEmployees() {
    var xmlhttp = new XMLHttpRequest();
    var myArr = new Object();
    xmlhttp.open("GET", "js/Trainning/JS4_list.json", true);
    xmlhttp.onreadystatechange = function (myArr) {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myArr = JSON.parse(xmlhttp.responseText);            
            Sort(myArr);
        }
    };    

    xmlhttp.send();


    return myArr;
}

erro: JS4_SortEmployees.js:16 Access to XMLHttpRequest at 'file:///C:/Users/pazevedo/Desktop/Trainning/Trainning/JavaScript/TrainningPage/js/Trainning/JS4_list.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

10 respostas

Seu navegador está fazendo a requisição via protocolo "FILE", que não oferece suporte ao CORS.

Você está rodando seu arquivo html usando um servidor http ou apenas abrindo o arquivo pelo navegador?

Se tiver abrindo diretamente pelo navegador de arquivos, instale um servidor http ou utilize esta extensão do Chrome para fazer a requisição via HTTP.

Estou usando um .HTML a partir de um arquivo local, instalei essa extensão mas continuou sem funcionar, estou sem ideia de como corrigir

Você adicionou a pasta e abriu utilizando o protocolo http?

Se você abrir o arquivo diretamente pelo navegador de arquivos ele vai abrir pelo protocolo file.

Abra a extensão, clique no botão "Choose Folder", selecione a pasta e clique no link http://127.0.0.1:8887

Se seu arquivo se chamar index.html provavelmente ele irá abrir, caso contrário coloque o nome dele após a porta http://127.0.0.1:8887/arquivo.html

"funcionou" Mas ele está passando reto no send, debuguei e vi que ele só entra no If na 4 tentativa, há uma forma de corrigir isso? Pois ele está retornado antes de pegar o conteúdo

Não está errado, o evento onreadystatechange é disparado toda vez que ocorre uma alteração no estado da requisição.

https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/onreadystatechange

Se desejar que só seja chamado na conclusão, altere para o evento onload

https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/readyState

Alterei, ele realmente entra em uma tentativa, mas o problema de só entrar dps que a função é executada persiste

Consegui, bastava mudar de true para falso e fazer uma requisição síncrona, embora nao indicada me serviu bem

Minha última dúvida é, é possível fazer isso sem a extensão do Chrome?

solução!

Essa extensão do Chrome é apenas um servidor HTTP.

Para funcionar, você precisa hospedar o arquivo em algum servidor que forneça o protocolo HTTP (ou HTTPS) para acessar, como um nginx, apache ou IIS, ou colocar o arquivo em alguma hospedagem ou servidor que forneça o protocolo HTTP(S).

Você pode ver mais informações nos seguinter cursos:

https://cursos.alura.com.br/course/aws-s3-manipule-e-armazene-na-nuvem

https://cursos.alura.com.br/course/amazon-cloudfront-route53

[]'s

Sobre a requisição, realmente vai fazer o retorno da function antes de concluir a requisição pois o Javascript é assincrono.

Coloque o retorno dentro do evento de retorno da requisição e deve funcionar corretamente.

function SortEmployees() {
    var xmlhttp = new XMLHttpRequest();
    var myArr = new Object();
    xmlhttp.open("GET", "js/Trainning/JS4_list.json", true);
    xmlhttp.onreadystatechange = function (myArr) {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myArr = JSON.parse(xmlhttp.responseText);            
            Sort(myArr);
            return myArr;
        }
    };    
    xmlhttp.send();
}