Como ler um arquivo JSON local externo em JavaScript?

Salvei um arquivo JSON no meu sistema local e criei um arquivo JavaScript para ler o arquivo JSON e imprimir dados. Aqui está o arquivo JSON:

{"resource":"A","literals":["B","C","D"]}

Digamos que este é o caminho do arquivo JSON: /Users/Documents/workspace/test.json .

Alguém poderia me ajudar a escrever um trecho de código simples para ler o arquivo JSON e imprimir os dados em JavaScript?

Você não pode fazer uma chamada AJAX para um recurso local, pois a solicitação é feita usando HTTP.

Uma solução alternativa é executar um servidor da web local, servir o arquivo e fazer a chamada AJAX para o host local.

Em termos de ajudar a escrever código para ler JSON, você deve ler a documentação para jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON/

Para ler o arquivo JSON local externo (data.json) usando javascript, primeiro crie seu arquivo data.json:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

1. Mencione o caminho do arquivo json na fonte do script junto com o arquivo javascript.

   <script type="text/javascript" src="data.json"></script>
   <script type="text/javascript" src="javascrip.js"></script>

2. Obter o objeto do arquivo json

   var mydata = JSON.parse(data);
   alert(mydata[0].name);
   alert(mydata[0].age);
   alert(mydata[1].name);
   alert(mydata[1].age);

Para mais informações, consulte esta referência .

O carregamento de um .jsonarquivo do disco rígido é uma operação assíncrona e, portanto, ele precisa especificar uma função de retorno de chamada a ser executada após o carregamento do arquivo.

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Esta função também funciona para carregar um .htmlou .txtarquivos, substituindo o parâmetro mime type para "text/html", "text/plain"etc.

Quando estiver no Node.js ou ao usar o require.js no navegador , você pode simplesmente:

let json = require('/Users/Documents/workspace/test.json');

Observe: o arquivo é carregado uma vez, as chamadas subseqüentes usarão o cache.

1. Primeiro, crie um arquivo json. Neste exemplo, meu arquivo é words.json

[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]

2. E aqui está o meu código, ou seja, node.js. Observe o 'utf8'argumento para readFileSync: isso faz com que não retorne um Buffer(emboraJSON.parse possa lidar com isso), mas uma string. Estou criando um servidor para ver o resultado ...

var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');

var app=express();

var server=app.listen(3030,listening);

function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());

3. Quando você quiser ler detalhes específicos de identificação, pode mencionar o código como ..

 app.get('/get/:id',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.id){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

4. Quando você digitou o URL, localhost:3030/get/33ele fornecerá os detalhes relacionados a esse ID .... e você também lerá pelo nome. Meu arquivo json tem nomes simillar com esse código, você pode obter detalhes de um nome .... e não imprimiu todos os nomes simillar

 app.get('/get/:name',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.name){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

5. E se você quiser ler detalhes do nome semelhante, poderá usar este código.

app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(word);
			 
 console.log("success");
	  
});

6. Se você quiser ler todas as informações no arquivo, use este código abaixo.

app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }
 

Usar a API de busca é a solução mais fácil:

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

Funciona perfeitamente no Firefox, mas no Chrome você precisa personalizar as configurações de segurança.

Como muitas pessoas mencionaram antes, isso não funciona usando uma chamada AJAX. No entanto, há uma maneira de contornar isso. Usando o elemento de entrada, você pode selecionar seu arquivo.

O arquivo selecionado (.json) precisa ter esta estrutura:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

Então você pode ler o arquivo usando JS com FileReader ():

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

Dependendo do seu navegador, você pode acessar seus arquivos locais. Mas isso pode não funcionar para todos os usuários do seu aplicativo.

Para fazer isso, você pode tentar as instruções aqui: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Depois que seu arquivo é carregado, você pode recuperar os dados usando:

var jsonData = JSON.parse(theTextContentOfMyFile);

Se você estiver usando arquivos locais, por que não apenas empacotar os dados como um objeto js?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

Sem XMLHttpRequests , sem análise, basta usar MyData.resourcediretamente

Muito simples.
Renomeie seu arquivo json para ".js" em vez de ".json".

<script type="text/javascript" src="my_json.js"></script>

Portanto, siga seu código normalmente.

<script type="text/javascript">
var obj = JSON.parse(contacts);

No entanto, apenas para obter informações, o conteúdo do meu json é semelhante ao snip abaixo.

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

Você pode importá-lo como o módulo ES6;

import data from "/Users/Documents/workspace/test.json"

Basta usar $ .getJSON e, em seguida, $ .each para iterar o par Chave / valor. Exemplo de conteúdo para o arquivo JSON e o código funcional:

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

Você pode usar o método XMLHttpRequest ():

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

Você pode ver a resposta do myObj usando a instrução console.log (comentada).

Se você conhece o AngularJS, pode usar $ http:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

Se você tiver o arquivo em uma pasta diferente, mencione o caminho completo em vez do nome do arquivo.

Como você possui um aplicativo Web, você pode ter um cliente e um servidor.

Se você possui apenas seu navegador e deseja ler um arquivo local de um javascript em execução no seu navegador, isso significa que você possui apenas um cliente. Por razões de segurança, o navegador não deve permitir que você faça isso.

No entanto, como o lauhub explicou acima, isso parece funcionar:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Outra solução é configurar em algum lugar da sua máquina um servidor Web (pequeno no Windows ou macaco no Linux) e com uma biblioteca XMLHttpRequest ou D3, solicitar o arquivo do servidor e lê-lo. O servidor buscará o arquivo no sistema de arquivos local e o servirá através da web.

Gostei do que Stano / Meetar comentou acima. Eu o uso para ler arquivos .json. Expandi seus exemplos usando o Promise. Aqui está o plunker para o mesmo. https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

A leitura do JSON pode ser movida para outra função, para DRY; mas o exemplo aqui é mais sobre como usar promessas.

Você deve criar uma nova instância XMLHttpRequest e carregar o conteúdo do arquivo json.

Esta dica funciona para mim ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript ):

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

Uma solução simples é colocar o arquivo JSON em um servidor em execução local. para isso, no terminal, vá para a pasta do seu projeto e inicie o servidor local em algum número de porta, por exemplo, 8181

python -m SimpleHTTPServer 8181

Em seguida, navegando para http: // localhost: 8181 / deve exibir todos os seus arquivos, incluindo o JSON. Lembre-se de instalar o python se você ainda não o possui.

Se você pudesse executar um servidor Web local (como Chris P sugeriu acima) e se pudesse usar o jQuery, poderia tentar http://api.jquery.com/jQuery.getJSON/

Você pode usar o D3 para manipular o retorno de chamada e carregar o arquivo JSON local data.json, da seguinte maneira:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

Peguei a excelente resposta de Stano e a envolvi em uma promessa. Isso pode ser útil se você não tiver uma opção como node ou webpack para voltar a carregar um arquivo json no sistema de arquivos:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

Você pode chamar assim:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

Portanto, se você planeja usar o "Apache Tomcat" para hospedar seu arquivo JSON,

1> Após iniciar o servidor, verifique se o Apache Tomcat está em funcionamento, acessando este URL: "localhost: 8080" -

2> Em seguida, vá para a pasta "webapps" - "C: \ Arquivos de Programas \ Apache Software Foundation \ Tomcat 8.5 \ webapps". E, crie uma pasta de projeto ou copie sua pasta de projeto.

3> Cole o seu arquivo json por lá.

4> E é isso. Você terminou! Basta ir para - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .json"