322

Yerel bir JSON dosyası yüklemeye çalışıyorum ama çalışmaz. İşte JavaScript kodum (jQuery kullanarak:

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

Test.json dosyası:

{"a" : "b", "c" : "d"}

Hiçbir şey görüntülenmez ve Firebug bana verilerin tanımsız olduğunu söyler. Firebug'da görebiliyorum json.responseTextve iyi ve geçerli, ancak satırı kopyaladığımda garip:

 var data = eval("(" +json.responseText + ")");

Firebug'un konsolunda çalışıyor ve verilere erişebiliyorum.

Birinin çözümü olan var mı?

— Patrick Browne
kaynak

Bir JSONdizeyi döndürdüğünüzde , zaten bir javascript nesnesi alıyorsunuz, kullanmaya gerek yok eval().

— yoda

1

Ne "yerel" json dosyası diyorsunuz? tarayıcıda veya sunucuda yerel mi?

— seppo0010

2

Bize yeterince bilgi vermediniz. Dosya test.jsonherhangi bir yol belirtmez, bu nedenle ona erişen sayfanın konumuna göre göreli bir URI olur. Yani @ seppo0010, sayfanın uzaktaki bir sunucuda olması durumunda sunucu için yerel olacağını ve sayfanın file://protokol tarafından erişilen yerel dosya sisteminizde olması durumunda bilgisayarınıza göre olacağını söylüyor .

— hippietrail

292

$.getJSON eşzamansız olduğundan, şunları yapmanız gerekir:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

— seppo0010
kaynak

47

Yerel bir dosyaya gerçekten erişmenize izin var mı?

— maasha

3

Hayır, dosya olamaz ancak web sunucusu tarafından sunulmalıdır.

— Kris Erickson

15

Kesinlikle doğru. Chromes güvenliği, Firefox veya diğerlerinden daha sıkıdır. Xhr, Josn, Xml vb. Kullanarak bir şey yüklemek, bir veya iki şey hariç Chrome'da kilitlendi.

— shawty

1

Bunu denedim, ama şans yok. Konsolda da hata yok :(

— Govind Kailas

11

Yerel dosyanızı yüklemek ve chrome tarayıcısından erişmek için myjson.com'u kullanmanızı öneririm .

— Kimyasal Programcı

167

Aynı ihtiyacı vardı (benim angularjs uygulamasını test etmek için) ve bulduğum tek yol requir.js kullanmaktır:

var json = require('./data.json'); //(with path)

not: dosya bir kez yüklenir, daha fazla çağrı önbelleği kullanır.

Düğümlü dosyaları okuma hakkında daha fazla bilgi: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

requir.js: http://requirejs.org/

— Ehvince
kaynak

4

Bunu jest ile yapıyorsanız, yapmayı unutmayın jest.dontMock('./data.json');veya sonuç boştur. Dışarıdaki birisi için faydalı olabilir :)

— Håvard Geithus

1

Bu kodun içeriği nedir? Ne yapıyorsun json?

— Drazen Bjelovuk

4

Lütfen tam örnek verin: Hata alıyorum:has not been loaded yet for context: _. Use require([])

— shaijut

2

node.js modülü olduğu için gereksinim tarayıcıda çalışmıyor. OP tarayıcıya yüklemek istiyorsa, getirme doğru çözümdür.

— sniffingdoggo

1

Evet, talep düğüm içindir, ancak requirJS tarayıcılarda da kullanılabilir: "RequireJS bir JavaScript dosyası ve modül yükleyicisidir. Tarayıcı içi kullanım için optimize edilmiştir, ancak Rhino ve Node gibi diğer JavaScript ortamlarında kullanılabilir. "

— Görev Başına Aronsson

97

Daha modern bir şekilde artık Getirme API'sını kullanabilirsiniz :

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

Tüm modern tarayıcılar Getirme API'sını destekler. (Internet Explorer desteklemiyor, ancak Edge destekliyor!)

kaynak:

— aloisdg taşınma codidact.com
kaynak

1

Getirme API'sını kullanırken, bir güvenlik ayarını devre dışı bırakmadığınız sürece yerel dosyalara erişmeniz hala yasak mı?

— LarsH

3

@LarsH Görünüşe göre evet, bu sabah denedim ve api getir dosya: // scheme ile yerel bir json dosyasını okuyamıyor. Bu yaklaşım çok temiz görünüyor, ancak yerel dosyalar için kullanamazsınız

— keysl

1

@keysl Tamam, sanırım güvenlik nedenleriyle bu şekilde olmalı. (Ve haklısın, demek istedim " file://şema aracılığıyla dosyalara erişmek yasak .) Ama güzel ve temiz bir yaklaşım. Bu cevap sayesinde kullanmaya başladım.

— LarsH

Getirme API'sı ile yerel dosyalara erişemezsiniz

— anton zlydenko

89

Kullanıcının yerel json dosyasını (dosya sisteminin herhangi bir yerinde) seçmesine izin vermek istiyorsanız, aşağıdaki çözüm çalışır.

FileReader ve JSON.parser kullanır (ve jquery kullanmaz).

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

İşte FileReader'da iyi bir giriş: http://www.html5rocks.com/en/tutorials/file/dndfiles/

— Trausti Kristjansson
kaynak

4

FileReader API'si IE 8 veya 9'da desteklenmemektedir, ancak diğer tüm tarayıcılar TAMAM: caniuse.com/#search=filereader

— northben

Chrome'da mükemmel çalışıyor, verilerinizi göreceksiniznewArr

— Belter

Bu cevap güzel ve biraz farklı çünkü jQuery kullanmıyor.

— DigitalDesignDj

78

Hızlı ve kirli bir şey arıyorsanız, verileri HTML belgenizin başına yükleyin.

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

<html>
<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>
...
</html>

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

Yığın boyutunuzun (Chrome'da) yaklaşık 4 GB olduğunu belirtmeliyim, bu nedenle verileriniz bundan daha büyükse başka bir yöntem bulmalısınız. Başka bir tarayıcıyı kontrol etmek istiyorsanız şunu deneyin:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

— jwerre
kaynak

AMD'nin çalışacağı konusunda haklısınız, ancak AMD'nin burada doğru çözüm olduğunu düşünmüyorum. en basit olanı $ .getJSON kullanmaktır. teşekkürler

— Patrick Browne

7

@PatrickBrowne evet, getJSON iyi bir çözüm ancak birçok durumda etki alanları arası bir sorunla karşılaşacağınızı düşünüyorum (örneğin, S3'ten veri yükleme).

— jwerre

Bunu benim için en basit çözüm olarak buldum. JSON dosyası neredeyse aynı görünüyor, bu yüzden fazladan dağınıklık yok (sadece dosyanın en üstünde "var xyz ="). Kimse kodlarında büyük bir veri dosyası istemiyor.

— cslotty

Bu birçok düzeyde yanlış, nasıl çok oyu olduğunu anlamıyorum, burada kimse codepen.io/KryptoniteDove/post/… görmek istiyorsa daha fazla açıklıyor "Birçok örnek bir Aşağıdaki gibi basit bir işlev. Aslında, bunun aslında bir JSON belgesi yükleme değil, bir Javascript nesnesi oluşturma. Bu teknik gerçek JSON dosyaları için çalışmaz. "

— lesolorzanov

1

Dürüst olmak gerekirse, sadece önceden hazır verileriniz varsa ve statik bir sayfa sunmak istiyorsanız bu harika bir çözümdür

— Evan Pu

19

ES5 sürümü

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

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

ES6 sürümü

const loadJSON = (callback) => {
    let 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 = () => {
        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);
}

const init = () => {
    loadJSON((response) => {
        // Parse JSON string into object
        let actual_JSON = JSON.parse(response);
    });
}

Snippet'i genişlet

— xgqfrms
kaynak

@ Tomcat, Xampp veya Jboss gibi yerel bir uygulama Sunucusu kullanıyorsanız, Pier. senaryo çalışması

— Mirko Cianfarani

@MirkoCianfarani gerçekten file:///protokolü kullanmıyorsanız ve dosya artık yerel olarak kabul edilemez.

— Pier

@xgqfrms Getirme API'sı harika!

— xgqfrms

2

//xobj.status tamsayıdır xobj.status === "200" xobj.status === 200 olmalıdır

— yausername 22:09

@yausername haklısın, bu hata durumu türü için özür dilerim ve düzeltildi.

— xgqfrms

14

Orijinal Poster'in gerçek koduyla ilgili sorunu anlamadan ve / veya çözmeden bu sorunun kaç kez cevaplandığına inanamıyorum. Ben kendim acemi olduğumu söyledi (sadece 2 aylık kodlama). Kodum mükemmel çalışıyor, ancak herhangi bir değişiklik önermekten çekinmeyin. İşte çözüm:

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

Yukarıda sağladığım aynı kodu yazmanın daha kısa bir yolu:

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

Kodu aynı şekilde yazmak için $ .getJSON yerine $ .ajax komutunu da kullanabilirsiniz:

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

Son olarak, bunu yapmanın son yolu $ .ajax işlevini bir işleve sarmaktır. Bunun için kredi alamıyorum, ama biraz değiştirdim. Ben test ve çalışır ve yukarıdaki kodumla aynı sonuçları üretir. Bu çözümü burada buldum -> json'u değişkene yükle

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

Yukarıdaki kodumda gördüğünüz test.json dosyası sunucumda barındırılıyor ve o (orijinal poster) tarafından yayınlanan aynı json veri nesnesini içeriyor.

{
    "a" : "b",
    "c" : "d"
}

— SpoonHonda
kaynak

11

Es6'dan içe aktarma işleminden bahsedilmediğine şaşırdım (küçük dosyalarla kullanın)

Ör: import test from './test.json'

webpack 2 < dosyalar json-loaderiçin varsayılan olarak kullanır .json.

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

İçin typescript :

import test from 'json-loader!./test.json';

TS2307 (TS) 'json-loader! ./ suburbs.json' modülü bulunamıyor

Çalışması için önce modülü beyan etmek zorunda kaldım. Umarım bu birisi için birkaç saat kazanır.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

Ben ihmal kalksa loaderdan json-loaderaşağıdaki hatayı aldım webpack:

KIRILMA DEĞİŞİKLİĞİ: Yükleyicileri kullanırken artık '-loader' son ekinin atlanmasına izin verilmiyor. 'Json' yerine 'json-loader' belirtmeniz gerekir, bkz. Https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

— Ogglas
kaynak

1

kolay ve anlaşılır.

— Our_Benefactors

Web sayfası file: protokolüyle birlikte yüklendiğinde es6 import deyimini kullanamazsınız.

— Onno van der Zee

6

Deneyin şu şekildedir (ancak JavaScript'in istemci dosya sistemine erişimi olmadığını lütfen unutmayın):

$.getJSON('test.json', function(data) {
  console.log(data);
});

— Samich
kaynak

6

Son zamanlarda D3js yerel json dosyasını işleyebilir.

Sorun https://github.com/mbostock/d3/issues/673

Bu, D3'ün yerel json dosyalarıyla çalışması için yama sırasıdır. https://github.com/mbostock/d3/pull/632

— ns-1m
kaynak

4

bu cevap, json dosyalarını okumak için D3'ün nasıl kullanılacağına dair bir örnekle çok daha iyi olacaktır.

— Paul H

4

Yerel bir json dosyası yüklemeye çalışırken (başarısız) bu iş parçacığını buldum. Bu çözüm benim için çalıştı ...

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

... ve bu şekilde kullanılır ...

load_json("test2.html.js")

... ve bu <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>

— TechSpud
kaynak

2

Bu çok yeniden kullanılabilir gibi görünmüyor. Örneğin, json dosyası uzak bir sunucu tarafından sunuluyorsa, 100 ms zaman aşımı yükleme için yeterli olmayabilir. Zaman, istemcinin bağlantı hızına bağlı olduğundan, yavaş bağlantıya sahip istemciler için çok uzun bir zaman aşımı ayarlamanız gerekir. Kısacası, setTimeout kaynağın yüklenmesini beklemek için kullanılmamalıdır.

— Kenny806

1

Kenny806 - Belirli bir sorunu çözmek - yerel kaynakları (barındırılmayan bir web sayfası için) yüklemek, yani çok yeniden kullanılabilir olmadığı anlamına geliyor. Web'de barındırılan sayfalar için 1000'lerce kaynak yükleme çözümü vardır. Bu değil bu, çözüm bir çözüm. Zaman aşımını değiştirmek gerçekten çok basit. Zaman aşımını kaldırarak sonsuz bir beklemenin kabul edilebilir olduğunu düşünüyor musunuz?

— TechSpud

2

Sonsuz bir bekleme önermiyorum, biter bitmez dosya yüküne tepki vermenizi sağlayan bir teknik kullanmanızı öneririm. Zaman aşımı ile ilgili sorunum, her zaman bitmesini beklemeniz gerektiğidir. Dosya 10ms'de yüklenmiş olsa bile, yine de 100ms beklersiniz. Ve evet, zaman aşımını ayarlamak kolaydır, ancak önerdiğiniz şey her farklı dosya yüklemek istediğinizde veya dosya siizasyonu değiştiğinde (beklemeyi optimize etmek için) kodu değiştirmektir. Böyle bir çözüm IMHO yanlıştır ve gelecekte, özellikle başka biri kullanmaya çalıştığında çok fazla baş ağrısına neden olabilir.

— Kenny806

Bu komut dosyasını kullanan herkes, komut dosyasını kendi komut dosyaları için temel olarak kullanmalıdır . Bu komut dosyasının yanlış olup olmadığı konusunda görüşünüz vardır. Neden alternatif bir çözüm önermiyorsunuz? Bu kesinlikle tüm kullanım durumlarında işe yaramaz. Yerel bir html sayfasından yerel bir dosya yükleyerek benim için çalıştı. Bu soruyla ilgili çözümümü paylaştım, umarım başka birine yardımcı olur. Yerel bir kaynak yüklemeye mi çalışıyorsunuz? Yüklediğiniz dosyaya bağlı olarak zaman aşımı değerini neden değişken olarak vermiyorsunuz? Yerel dosyalarda Ajax oldukça sınırlıdır.

— TechSpud

1

Onreadystatechange veya onload kullanmak ve onlara bir işlev vermek daha iyi olabilir. script.onload = işlevadı;

— Shane Best

4

TypeScript'te, yerel JSON dosyalarını yüklemek için içe aktarmayı kullanabilirsiniz. Örneğin bir font.json yüklemek:

import * as fontJson from '../../public/fonts/font_name.json';

Bu bir tsconfig bayrağı gerektirir --resolveJsonModule:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

Daha fazla bilgi için typecript'in sürüm notlarına bakın: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

— teh.fonsi
kaynak

Cevap biraz anlaşılır olduğu için daha fazla ayrıntıyla yazabilir.

— Bay

3

Açısal (veya başka bir çerçeve), http get kullanarak yükleyebilirsiniz ben böyle bir şey kullanın:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

Bu yardımcı olur umarım.

— Rajkiran
kaynak

3

Yaptığım şey JSON dosyasını biraz düzenlemekti.

myfile.json => myfile.js

JSON dosyasında (bir JS değişkeni yapın)

{name: "Whatever"} => var x = {name: "Whatever"}

Sonunda,

export default x;

Sonra,

import JsonObj from './myfile.js';

— Supun Kavinda
kaynak

3

JSON için yerel bir dizi kullanıyorsanız - soruda (test.json) örneğinizde gösterildiği gibi parseJSON()JQuery yöntemi olabilir ->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() uzak bir siteden JSON almak için kullanılır - yerel olarak çalışmaz (yerel bir HTTP Sunucusu kullanmadığınız sürece)

— papaz evi
kaynak

2

$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });


             }
  });

— Karhan Vijay
kaynak

1

Kullanmak istediğim bir yaklaşım, json'u bir nesne değişmeziyle doldurmak / sarmak ve ardından dosyayı bir .jsonp dosya uzantısıyla kaydetmek. Bu yöntem, yeni jsonp dosyasıyla (test.jsonp) çalışacağınız için orijinal json dosyanızı (test.json) değiştirmeden bırakır. Sarıcıdaki ad herhangi bir şey olabilir, ancak jsonp'yi işlemek için kullandığınız geri arama işleviyle aynı ad olması gerekir. 'Test.jsonp' dosyası için jsonp sarmalayıcı ekini göstermek için örnek olarak gönderilen test.json'unuzu kullanacağım.

json_callback({"a" : "b", "c" : "d"});

Ardından, döndürülen JSON'u tutmak için komut dosyanızda genel kapsamı olan yeniden kullanılabilir bir değişken oluşturun. Bu, döndürülen JSON verilerini komut dosyanızdaki yalnızca geri arama işlevi yerine tüm diğer işlevler için kullanılabilir hale getirir.

var myJSON;

Sonra komut dosyası enjeksiyonu ile json almak için basit bir işlev geliyor. IE, jQuery .append yöntemini desteklemediğinden, burada jQuery'yi komut dosyasını belge başlığına eklemek için kullanamayacağımızı unutmayın. Aşağıdaki kodda belirtilen jQuery yöntemi, .append yöntemini destekleyen diğer tarayıcılarda çalışır. Farkı göstermek için referans olarak dahil edilmiştir.

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

Sonraki, json sonuç verilerini genel değişkene almak için kısa ve basit bir geri arama işlevidir (jsonp sarıcı ile aynı ada sahiptir).

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

Json verilerine artık nokta gösterimi kullanılarak komut dosyasının herhangi bir işlevi tarafından erişilebilir. Örnek olarak:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

Bu yöntem, görmeye alışık olduğunuzdan biraz farklı olabilir, ancak birçok avantajı vardır. İlk olarak, aynı jsonp dosyası aynı işlevleri kullanarak yerel olarak veya bir sunucudan yüklenebilir. Bonus olarak, jsonp zaten alanlar arası uyumlu bir formattadır ve REST tipi API'lerle de kolayca kullanılabilir.

Kabul edilirse, hata işleme işlevleri yoktur, ancak neden bir taneye ihtiyacınız var? Bu yöntemi kullanarak json verilerini alamıyorsanız, hemen hemen json içinde bazı sorunlarınız olduğundan emin olabilirsiniz ve iyi bir JSON doğrulayıcıda kontrol ederim.

— Aydınlanma
kaynak

1

Json'unuzu bir javascript dosyasına koyabilirsiniz. Bu, jQuery'ler kullanılarak yerel olarak (Chrome'da bile) yüklenebilirgetScript() işlevi .

map-01.js dosyası:

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

çıktı:

world width: 500

Json değişkeninin bildirildiğine ve js dosyasında atandığına dikkat edin.

— Victor Stoddard
kaynak

0

Google'ın Closure kütüphanesini kullanarak herhangi bir çözüm bulamadım. Gelecekteki ziyaretçilerin listesini tamamlamak için, Closure kütüphanesi ile yerel dosyadan bir JSON'u nasıl yüklediğiniz aşağıda açıklanmıştır:

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});

— Kenny806
kaynak

0

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);

Snippet'i genişlet

Ben JSON için yeni bir JavaScript dosyası oluşturulur gibi benim cordova app için yaptım ve içine JSON veri yapıştırılan String.rawsonra bunu ayrıştırmakJSON.parse

— Jeeva
kaynak

Bir javascript dosyası ise neden sadece JavaScript Object Notation(JSON) kullanarak değil de bir nesne yapmak : obj = [{"name": "Jeeva"}, {"name": "Kumar"}]

— Nuno André

Ben dize olarak geldi ajax kullanarak bazı json verileri getirdim çünkü kullandım, bu yüzden JSON.parsebir JavaScript nesnesine dönüştürmek için kullanın

— Jeeva

0

function readTextFile(srcfile) {
        try { //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            }

        } catch (e) {

        }
}

readTextFile("C:\\Users\\someuser\\json.txt");

Yaptığım şey, her şeyden önce, ağ sekmesinden, hizmetin ağ trafiğini kaydetmek ve yanıt gövdesinden, json nesnesini yerel bir dosyaya kopyalayıp kaydetmekti. Daha sonra yerel dosya adıyla işlevi çağırın, yukarıdaki jsonOutout'ta json nesnesini görebilmeniz gerekir.

— Feng Zhang
kaynak

2

Lütfen kodu yapıştırmak yerine çözümünüzü açıklayın. Sadece sorunun nasıl çözüldüğünü açıklayan bir çözüm topluma yardımcı olacaktır.

— gmuraleekrishna

Not: InternetExplorer

— Sancarn

0

Benim için işe yarayan şudur:

Giriş:

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

Javascript Kodu:

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    {
        //alert("I am here");
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            }
        }
    }
    rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>

— Bishwas Mishra
kaynak

-4

Yerel makinenizde Python yüklüyse (veya bir tane yüklemeyi düşünmüyorsanız), kullandığım yerel JSON dosya erişim sorunu için tarayıcıdan bağımsız bir çözüm aşağıdadır:

Verileri JavaScript nesnesi olarak döndüren bir işlev oluşturarak JSON dosyasını bir JavaScript'e dönüştürün. Ardından <script> etiketi ile yükleyebilir ve istediğiniz verileri almak için işlevi çağırabilirsiniz.

İşte Python kodu geliyor

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')

— Sytrus
kaynak

Yerel JSON dosyası yükleniyor

ES5 sürümü

ES6 sürümü