Harici bir yerel JSON dosyası JavaScript'te nasıl okunur?

Yerel sistemime bir JSON dosyası kaydettim ve JSON dosyasını okumak ve verileri yazdırmak için bir JavaScript dosyası oluşturdum. JSON dosyası şöyledir:

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

En bu JSON dosyasının yolunu diyelim: /Users/Documents/workspace/test.json.

Herkes lütfen JSON dosyasını okumak ve verileri JavaScript'te yazdırmak için basit bir kod parçası yazmamda bana yardımcı olabilir mi?

Sen olamaz istek HTTP kullanılarak yapılır gibi bir yerel kaynak için bir AJAX arama yapmak.

Çözüm, yerel bir web sunucusu çalıştırmak, dosyayı sunmak ve AJAX'ı localhost'a çağırmaktır.

JSON'u okumak için kod yazmanıza yardımcı olması açısından, aşağıdakiler için belgeleri okumalısınız jQuery.getJSON():

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

Javascript kullanarak harici Yerel JSON dosyasını (data.json) okumak için, önce data.json dosyanızı oluşturun:

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

1. Javascript dosyası ile birlikte komut dosyası kaynağındaki json dosyasının yolunu belirtin.

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

2. Nesneyi json dosyasından alın

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

Daha fazla bilgi için bu referansa bakın .

Bir .jsondosyanın sabit diskten yüklenmesi eşzamansız bir işlemdir ve bu nedenle dosya yüklendikten sonra yürütmek için bir geri çağırma işlevi belirtmesi gerekir.

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

Bu fonksiyon yükleme a için de çalışır .htmlveya .txthiç mim türü parametresi geçersiz kılarak, dosyalar "text/html", "text/plain"vb

Ne zaman node.js veya tarayıcıda require.js kullanırken , sadece yapabilirsiniz:

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

Not: dosya bir kez yüklenir, sonraki aramalar önbelleği kullanır.

1. İlk önce bir json dosyası oluşturun. Bu örnekte dosyam 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. Ve işte kodum yani node.js. Şu 'utf8'argümana dikkat edin readFileSync: bu, bir Buffer( değil JSON.parsede işleyebilir) değil, bir dize döndürmesini sağlar . Sonucu görmek için bir sunucu oluşturuyorum ...

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. Belirli kimlik ayrıntılarını okumak istediğinizde koddan bahsedebilirsiniz ..

 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. URL'ye girdiğinizde localhost:3030/get/33o kimlikle ilgili ayrıntıları verir .... ve ismiyle de okursunuz. Json dosyamda bu kod ile benzer isimler var, bir isim detayı alabilirsiniz .... ve tüm benzer isimleri yazdıramadı

 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. Ve benzer ad ayrıntılarını okumak istiyorsanız, bu kodu kullanabilirsiniz.

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. Dosyadaki tüm bilgileri okumak istiyorsanız aşağıdaki kodu kullanın.

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

 }
 

Getirme API'sını kullanmak en kolay çözümdür:

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

Firefox'ta mükemmel çalışıyor, ancak Chrome'da güvenlik ayarını özelleştirmeniz gerekiyor.

Daha önce de belirtildiği gibi, bu bir AJAX çağrısı kullanarak çalışmaz. Ancak, bunun bir yolu var. Giriş öğesini kullanarak dosyanızı seçebilirsiniz.

Seçilen dosyanın (.json) bu yapıya sahip olması gerekir:

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

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

Sonra FileReader () ile JS kullanarak dosyayı okuyabilirsiniz:

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

Tarayıcınıza bağlı olarak, yerel dosyalarınıza erişebilirsiniz. Ancak bu, uygulamanızın tüm kullanıcıları için çalışmayabilir.

Bunu yapmak için, buradan talimatları deneyebilirsiniz: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Dosyanız yüklendikten sonra, verileri kullanarak şunları alabilirsiniz:

var jsonData = JSON.parse(theTextContentOfMyFile);

Yerel dosyalar kullanıyorsanız, neden sadece verileri bir js nesnesi olarak paketlemiyorsunuz?

data.js

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

Hiçbir XMLHttpRequest'ler , hiçbir ayrıştırma, sadece kullanma MyData.resourcedoğrudan

Çok basit.
Json dosyanızı ".js" yerine ".json" olarak yeniden adlandırın.

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

Kodunuzu normal şekilde takip edin.

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

Ancak, sadece bilgi için, benim json içeriği aşağıdaki snip gibi görünüyor.

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

ES6 modülü gibi içe aktarabilirsiniz;

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

Anahtar / değer çiftini yinelemek için $ .getJSON ve ardından $ .each kullanın. JSON dosyası ve işlev kodu için içerik örneği:

    {
        {
            "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)
            }
        })
    });

XMLHttpRequest () yöntemini kullanabilirsiniz:

    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();

MyObj yanıtını console.log deyimini (yorum yaptı) kullanarak görebilirsiniz.

AngularJS biliyorsanız, $ http kullanabilirsiniz:

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

Dosyayı farklı bir klasörde alıyorsanız, dosya adı yerine tam yolu belirtin.

Bir web uygulamanız olduğundan, bir istemciniz ve bir sunucunuz olabilir.

Yalnızca tarayıcınız varsa ve tarayıcınızda çalışan bir javascript'ten yerel bir dosya okumak istiyorsanız, bu sadece bir istemciniz olduğu anlamına gelir. Güvenlik nedeniyle, tarayıcı böyle bir şey yapmanıza izin vermemelidir.

Ancak, lauhub'un yukarıda açıkladığı gibi, bu işe yarıyor gibi görünüyor:

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

Diğer çözüm, makinenizde bir yerde bir web sunucusu (Linux'ta küçük veya linux'da maymun) ve bir XMLHttpRequest veya D3 kütüphanesi kurmak, dosyayı sunucudan istemek ve okumaktır. Sunucu dosyayı yerel dosya sisteminden alır ve web üzerinden size sunar.

Stano / Meetar'ın yukarıda yorumladığı şeyleri beğendim. .Json dosyalarını okumak için kullanıyorum. Promise kullanarak örneklerini genişlettim. İşte bunun için dalgıç. 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); 
       });

JSON'un okunması DRY için başka bir işleve taşınabilir; ancak buradaki örnek daha çok sözlerin nasıl kullanılacağını göstermektir.

Yeni bir XMLHttpRequest örneği oluşturmalı ve json dosyasının içeriğini yüklemelisiniz.

Bu ipucu benim için çalışıyor ( 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);
 });

Basit bir çözüm, JSON dosyanızı yerel olarak çalışan bir sunucuya koymaktır. bunun için terminalden proje klasörünüze gidin ve yerel sunucuyu bazı port numaralarında başlatın, örneğin 8181

python -m SimpleHTTPServer 8181

Ardından http: // localhost: 8181 / dizinine göz atmak , JSON dahil tüm dosyalarınızı görüntülemelidir. Henüz yüklemediyseniz python yüklemeyi unutmayın.

Yerel bir web sunucusu çalıştırabilirseniz (yukarıda Chris P'nin önerdiği gibi) ve jQuery kullanabiliyorsanız, http://api.jquery.com/jQuery.getJSON/

D3'ü geri aramayı işlemek ve yerel JSON dosyasını data.jsonaşağıdaki gibi yüklemek için kullanabilirsiniz :

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

Stano'nun mükemmel cevabını aldım ve bir söze tamamladım. Dosya sisteminden bir json dosyası yüklemek için geri dönecek düğüm veya web paketi gibi bir seçeneğiniz yoksa bu yararlı olabilir:

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

Buna şöyle diyebilirsiniz:

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

Dolayısıyla, JSON dosyanızı barındırmak için "Apache Tomcat" ile gitmeyi planlıyorsanız,

1> Sunucuyu başlattıktan sonra, şu URL'ye giderek Apache Tomcat'inizin çalışır durumda olduğunu doğrulayın: "localhost: 8080" -

2> Ardından, "webapps" klasörüne gidin - "C: \ Program Files \ Apache Software Foundation \ Tomcat 8.5 \ webapps". Bir proje klasörü oluşturun veya proje klasörünüzü kopyalayın.

3> json dosyanızı oraya yapıştırın.

4> İşte bu kadar. Bitirdiniz! " Http: // localhost: 8080 / $ proje_adı $ / $ jsonFile_name $ .json" adresine gidin.