¿Cómo leer un archivo JSON local externo en JavaScript?

He guardado un archivo JSON en mi sistema local y he creado un archivo JavaScript para leer el archivo JSON e imprimir datos. Aquí está el archivo JSON:

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

Digamos que esta es la ruta del archivo JSON: /Users/Documents/workspace/test.json.

¿Podría alguien ayudarme a escribir un simple código para leer el archivo JSON e imprimir los datos en JavaScript?

No puede realizar una llamada AJAX a un recurso local ya que la solicitud se realiza mediante HTTP.

Una solución alternativa es ejecutar un servidor web local, servir el archivo y realizar la llamada AJAX a localhost.

En términos de ayudarlo a escribir código para leer JSON, debe leer la documentación para jQuery.getJSON():

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

Para leer el archivo JSON local externo (data.json) usando javascript, primero cree su archivo data.json:

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

1. Mencione la ruta del archivo json en la fuente del script junto con el archivo javascript.

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

2. Obtener el objeto del archivo json

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

Para más información, consulte esta referencia .

La carga de un .jsonarchivo desde el disco duro es una operación asincrónica y, por lo tanto, debe especificar una función de devolución de llamada para ejecutar después de cargar el archivo.

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 función también funciona para cargar archivos .htmlo .txt, anulando el parámetro de tipo mime a "text/html", "text/plain"etc.

Cuando esté en Node.js o cuando use require.js en el navegador , simplemente puede hacer:

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

Tenga en cuenta: el archivo se carga una vez, las llamadas posteriores utilizarán el caché.

1. Primero, crea un archivo json. En este ejemplo, mi archivo es 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. Y aquí está mi código, es decir, node.js. Tenga en cuenta el 'utf8'argumento de readFileSync: esto hace que devuelva no un Buffer(aunque JSON.parsepuede manejarlo), sino una cadena. Estoy creando un servidor para ver el 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. Cuando desee leer detalles de identificación particulares, puede mencionar el 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. Cuando ingresó en la URL localhost:3030/get/33, le dará los detalles relacionados con esa identificación ... y también leerá por nombre. Mi archivo json tiene nombres similares con este código, puede obtener detalles de un nombre ... y no imprimió todos los nombres similares

 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. Y si desea leer los detalles del nombre similar, puede 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. Si desea leer toda la información en el archivo, use este código a continuación.

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

 }
 

Usar la API Fetch es la solución más fácil:

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

Funciona perfectamente en Firefox, pero en Chrome debe personalizar la configuración de seguridad.

Como muchas personas mencionaron antes, esto no funciona con una llamada AJAX. Sin embargo, hay una forma de evitarlo. Usando el elemento de entrada, puede seleccionar su archivo.

El archivo seleccionado (.json) debe tener esta estructura:

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

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

Luego puede leer el archivo usando JS con 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);
});

Dependiendo de su navegador, puede acceder a sus archivos locales. Pero esto puede no funcionar para todos los usuarios de su aplicación.

Para hacer esto, puede probar las instrucciones desde aquí: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Una vez que se carga su archivo, puede recuperar los datos usando:

var jsonData = JSON.parse(theTextContentOfMyFile);

Si está utilizando archivos locales, ¿por qué no empacar los datos como un objeto js?

data.js

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

Sin XMLHttpRequests , sin análisis, solo use MyData.resourcedirectamente

Muy simple.
Cambie el nombre de su archivo json a ".js" en lugar de ".json".

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

Así que sigue tu código normalmente.

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

Sin embargo, solo para información, el contenido de mi json es como el recorte a continuación.

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

Puede importarlo como el módulo ES6;

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

Simplemente use $ .getJSON y luego $ .each para iterar el par Clave / valor. Ejemplo de contenido para el archivo JSON y el 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)
            }
        })
    });

Puede usar el 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();

Puede ver la respuesta de myObj usando la instrucción console.log (comentado).

Si conoce AngularJS, puede 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;
  };
}

Si tiene el archivo en una carpeta diferente, mencione la ruta completa en lugar del nombre del archivo.

Como tiene una aplicación web, puede tener un cliente y un servidor.

Si solo tiene su navegador y desea leer un archivo local de un javascript que se ejecuta en su navegador, eso significa que solo tiene un cliente. Por razones de seguridad, el navegador no debe permitirle hacer tal cosa.

Sin embargo, como lauhub explicó anteriormente, esto parece funcionar:

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

Otra solución es configurar en algún lugar de su máquina un servidor web (pequeño en Windows o mono en Linux) y con una biblioteca XMLHttpRequest o D3, solicitar el archivo del servidor y leerlo. El servidor buscará el archivo del sistema de archivos local y se lo servirá a través de la web.

Me gustó lo que Stano / Meetar comentó anteriormente. Lo uso para leer archivos .json. He expandido sus ejemplos usando Promise. Aquí está el saqueador de lo mismo. 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); 
       });

La lectura de JSON se puede mover a otra función, para DRY; pero el ejemplo aquí es más de mostrar cómo usar las promesas.

Debe crear una nueva instancia XMLHttpRequest y cargar el contenido del archivo json.

Este consejo me funciona ( 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);
 });

Una solución simple es colocar su archivo JSON dentro de un servidor que se ejecuta localmente. para eso desde la terminal, vaya a la carpeta de su proyecto e inicie el servidor local en algún número de puerto, por ejemplo, 8181

python -m SimpleHTTPServer 8181

Luego, vaya a http: // localhost: 8181 / debería mostrar todos sus archivos, incluido el JSON. Recuerde instalar Python si aún no lo tiene.

Si pudiera ejecutar un servidor web local (como Chris P sugirió anteriormente), y si pudiera usar jQuery, podría intentar http://api.jquery.com/jQuery.getJSON/

Puede usar D3 para manejar la devolución de llamada y cargar el archivo JSON local data.json, de la siguiente manera:

<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>

Tomé la excelente respuesta de Stano y la envolví en una promesa. Esto podría ser útil si no tiene una opción como nodo o paquete web a la que recurrir para cargar un archivo json desde el sistema de archivos:

// 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);
});

Puedes llamarlo así:

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

Entonces, si planea utilizar "Apache Tomcat" para alojar su archivo JSON,

1> Después de iniciar el servidor, verifique que su Apache Tomcat esté en funcionamiento yendo a esta url: "localhost: 8080" -

2> A continuación, vaya a carpeta "webapps" - "C: \ Archivos de programa \ Apache Software Foundation \ Tomcat 8.5 \ webapps". Y, cree una carpeta de proyecto o copie su carpeta de proyecto.

3> Pegue su archivo json allí.

4> Y eso es todo. ¡Estás listo! Simplemente vaya a - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .json"