manejo - read file javascript

Cómo leer un archivo JSON local externo en Javascript

Question

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

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

Digamos que esta es la ruta en la que te lleva al archivo JSON:

/Users/Documents/workspace/test.json

¿Alguien podría ayudarme a escribir un código simple para leer el archivo JSON e imprimir los datos dentro de él en Javascript? Soy muy nuevo en Javascript y necesito algo simple para empezar. Su ayuda sería muy apreciada.

Answer 1

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 argumento ''utf8'' para readFileSync : esto hace que no devuelva un Buffer (aunque JSON.parse puede 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 url como localhost:3030/get/33 dará los detalles relacionados con ese ID ... y también leerá por nombre. Mi archivo json tiene nombres de similares con este código, puede obtener detalles de un nombre ... y no imprime todos los nombres de 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 de simillar, 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, utilice este código a continuación.

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

 }
 

Answer 2

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

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

Sin embargo, como explicó lauhub 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 monkey in linux) y con una biblioteca XMLHttpRequest o D3, solicite el archivo del servidor y léalo. El servidor buscará el archivo desde el sistema de archivos local y se lo enviará a través de la web.

Answer 3

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

Este consejo funciona para mí ( 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);
 });

Answer 4

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

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

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

var jsonData = JSON.parse(theTextContentOfMyFile);

Answer 5

Me gustó lo que Stano / Meetar comentó anteriormente. Lo uso para leer archivos .json. He expandido sus ejemplos usando Promise. Aquí está el plunker por 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 SECO; pero el ejemplo aquí es más de mostrar cómo usar las promesas.

Answer 6

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

Una solución 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 de jQuery.getJSON() :

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

Answer 7

Para leer el archivo JSON Local externo (data.json) usando javascript, primero crea tu archivo data.json:

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

1. Mencione la ruta del archivo json en el origen 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 obtener más información, consulte esta referencia .

Answer 8

Por lo tanto, si planea ir con "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> Luego, vaya a la 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"

Answer 9

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>

Answer 10

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 declaración console.log (comentada).

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.

Answer 11

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

data.js

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

Sin XMLHttpRequests , sin análisis, solo use MyData.resource directamente

Answer 12

Si pudieras ejecutar un servidor web local (como sugirió Chris P arriba), y si pudieras usar jQuery, podrías probar http://api.jquery.com/jQuery.getJSON/

Answer 13

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 la caché.

Answer 14

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

python -m SimpleHTTPServer 8181

Luego, navegue a http://localhost:8181/ y muestre todos sus archivos, incluido el JSON. Recuerde instalar Python si aún no lo tiene.

Answer 15

La carga de un archivo .json desde el disco duro es una operación asincrónica y, por lo tanto, necesita especificar una función de devolución de llamada para ejecutar una vez que se haya cargado 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 .html o .txt , anulando el parámetro del tipo mime a "text/html" , "text/plain" etc.