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


256

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?


Yanıtlar:


93

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/


2
Bu durumda bir yerel sunucuyu nasıl çalıştırabileceğimi lütfen bana yönlendirir misiniz? Yerel sunucuyu çalıştırmak için ne yapmam gerekir?
user2864315

2
Hangi ortamı kullanıyorsunuz? Pencereler? Linux?
Chris Pickford

25
Bu sadece AJAX için geçerlidir: Chrome altında ve HTML5'in Dosya API'sını kullanarak zaten yaptım. Soru AJAX hakkında soru sormadı.
lauhub

10
Python yüklediyseniz, komut satırını kullanabilir python -m SimpleHTTPServer 8888ve http://localhost:8888/tarayıcınızda (Windows veya Mac) açabilirsiniz . 8888bağlantı noktasıdır ve değiştirilebilir.
geotheory

3
@ Geotheory'nin yorumunu güncellemek için Python 3 ile komut şu şekildedirpython -m http.server 8888
Marc Stober

193

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 .


8
Bu, dosyayı değiştirebiliyorsanız veya dosya içeriği olarak uygun JSON'a sahip değilse çalışır. Örneğin, data.jsonyukarıdaki örnek içerik doğrulamayı geçmez: jsonlint.com gerçekten JavaScript olduğundan. Tekli tırnakları atlamak onu saf JavaScript'e dönüştürür.
Jason Aller

3
Not: JSON.parse bazı eski tarayıcılarda desteklenmez (IE'ye bakarken). İçin MDN'nin Tarayıcı Uyumluluğu tablosuna bakınwindow.JSON .
Sumner Evans

JSON.parse (veri) olmamalıdır; bir dize olduğu için çalışmıyor?
call-me

261
Bu doğru bir cevap değil. Yanıttaki örnek bir json dosyası yüklemiyor. Aslında sadece bazı sabit kodlu json adlı bir değişken olarak saklayan başka bir javascript dosyası yükleniyor data. Eğer dize tırnaklarını json'un etrafından kaldırırsanız, data.json kullanmanıza bile gerek kalmaz JSON.parse. Soru, JSON dosyasını başka bir javascript dosyasına sabit kodlamak ve sonra yüklemek değil, nasıl JSON dosyası yükleyeceğinizdir.
wuliwong

1
JSON.parse(window.data);daha iyi bilgi sağlayacak scopebir datadeğişken.
Akash

126

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


14
Bu çok kötü bir uygulama! Google Chrome'da yerel bir kaynağa XmlHttpRequest yapamazsınız.
mhaseeb

11
@mhaseeb Kaynak istekte bulunan sistemle aynı etki alanına / protokole sahipse (şimdi bile, gelecekte) (yerel olduğu için bu olacaktır). CORS'a bak.
Mart'ta GreySage

11
mevcut Chrome ile denediğimde, "Çapraz kaynak istekleri yalnızca protokol şemaları için desteklenir: http, veri, krom, krom uzantısı, https." - Yani burada ima edilen hiçbir dosya protokolü @GreySage
eis

2
XMLHttpRequest.status sayısal bir değer döndürür. Bu sadece javascript kodunuzu ölmek yapmak için arka planda bir şeyler yapıyor çünkü çalışır. Aşağıdaki gibi okumalıdır: rawFile.status === 200
user3044394

1
Ayrıca rawFile.responseType = 'json';json nesnesini otomatik olarak ayrıştıracak şekilde ayarlayabilirsiniz, sadece geri arama rawFile.responseyerine geçtiğinizden emin olun rawFile.responseText.
Ignat


29
  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"}]

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

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

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

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

  1. Dosyadaki tüm bilgileri okumak istiyorsanız aşağıdaki kodu kullanın.

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

 }
 


requir () nereden geliyor? tarayıcım bulamıyor
shieldgenerator7

requir () yerleşik fonksiyonudur. requir () kullanarak ayrı dosyalarda bulunan modülleri dahil edebilirsiniz. Requir'in temel işlevselliği bir javascript dosyasını okur, dosyayı çalıştırır ve daha sonra
export

5
gerektirir () Node.js içine yerleştirilmiştir, yerel js parçası değildir
dementis

Bu yanıt Vanilla Javascript kullanarak bir dosyayı nasıl yükleyeceğinizi değil, Düğüm .js kullanarak nasıl yükleyeceğinizi gösterir
Amos Long

18

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.


Bunu denediğimde aşağıdaki hatayı aldım: (düğüm: 2065) UnhandledPromiseRejectionWarning: Hata: sadece mutlak url'ler destekleniyor
Jangid

13


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

Dosyanızın adını nereye koydunuz?
shieldgenerator7

1
Bu durumda, kullanıcı temel olarak web sayfasının geliştiricisinin beklemedikleri verileri yakalamasını önleyen CORS politikası nedeniyle dosyayı seçmelidir (ör. Özel dosyalarını alabilirim, Potansiyel olarak kötü bir komut dosyasına istekte bulunun ve kullanıcının izni olmadan çalıştırın). CORS politikası, bu tür şeyleri herhangi bir arka uç olmadan başa çıkmak için bir acı haline getirir, ancak kullanıcıyı daha güvenli hale getirir. Bir dosyayı gerçekten açmak istiyorsanız, bu istekleri yönetebilecek bir web sunucusu çalıştırmanız gerekir.
Sarah Cross

12

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

9

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


1
Tamam, ama javascript kullanımının daha açık olduğunu göstermek için lütfen MyData.resource bölümünü tamamlayabilirsiniz. Teşekkürler.
Bay

9

Ç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"}]';

4
bu bir json dosyası değil - bu bir JS dosyası.
Karpik

9

ES6 modülü gibi içe aktarabilirsiniz;

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

O zaman dinamik json dosyasını nasıl içe aktarabilirsiniz? Ben sadece json dosyalarını sadece yöntem tarafından geliştirme modunda olduğunuzda alabilirsiniz düşünüyorum.
Diamond

Haklısın. Sadece bu soruyu dikkate alarak cevap verdim.
Serhan C.

6

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

3

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.


2

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.


1

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.


1

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

Yine Firefox'ta çalışıyor ancak Chrome'da değil: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Herhangi bir JSON'u .JS dosyasına dönüştürmek için json2js kullanabilirsiniz .
lalengua

1

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.



-1

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>

-2

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

-4

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

resim açıklamasını buraya girin



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.

resim açıklamasını buraya girin


3> json dosyanızı oraya yapıştırın. resim açıklamasını buraya girin



4> İşte bu kadar. Bitirdiniz! " Http: // localhost: 8080 / $ proje_adı $ / $ jsonFile_name $ .json" adresine gidin.resim açıklamasını buraya girin


TomCat sunucusu istenmedi
Chandra Kanth
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.