Solucionado (ver solução)
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();
}