Memuat file JSON lokal

322

Saya mencoba memuat file JSON lokal tetapi tidak berfungsi. Ini kode JavaScript saya (menggunakan jQuery:

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

File test.json:

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

Tidak ada yang ditampilkan dan Firebug memberi tahu saya bahwa data tidak terdefinisi. Di Firebug saya bisa melihat json.responseTextdan itu bagus dan valid, tetapi aneh ketika saya menyalin baris:

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

di konsol Firebug, ia berfungsi dan saya dapat mengakses data.

Adakah yang punya solusi?

javascript jquery json firebug local-files Patrick Browne
sumber
Saat Anda mengembalikan JSONstring, Anda sudah mengambil objek javascript, tidak perlu digunakan eval().
yoda
1
Apa yang Anda sebut file json "lokal"? lokal di browser atau server?
seppo0010
2
Anda belum memberi kami cukup detail. File test.jsontidak menentukan jalur apa pun sehingga merupakan URI relatif, relatif terhadap lokasi halaman yang mengaksesnya. Jadi seperti @ seppo0010 mengatakan itu akan menjadi lokal ke server jika halaman berada di server jauh di suatu tempat dan itu akan relatif ke komputer Anda jika halaman tersebut di sistem file lokal Anda diakses oleh file://protokol.
hippietrail

Jawaban:

292

$.getJSON asinkron sehingga Anda harus melakukan:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
seppo0010
sumber
47
Apakah Anda benar-benar diizinkan mengakses file lokal?
maasha
3
Tidak, itu tidak bisa berupa file tetapi harus dilayani oleh server web.
Kris Erickson
15
Tepat sekali. Keamanan Chromes jauh lebih ketat daripada Firefox atau lainnya. Memuat apa pun menggunakan xhr, Josn, Xml dll hampir semuanya terkunci di Chrome dengan pengecualian satu atau dua hal.
shawty
1
Saya mencoba ini, tetapi tidak berhasil. Tidak ada kesalahan di konsol juga :(
Govind Kailas
11
Saya sarankan untuk menggunakan myjson.com untuk mengunggah file lokal Anda dan mengaksesnya dari browser chrome.
Programmer Kimia
167

Saya memiliki kebutuhan yang sama (untuk menguji aplikasi angularjs saya), dan satu-satunya cara yang saya temukan adalah dengan menggunakan require.js:

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

catatan: file dimuat sekali, panggilan selanjutnya akan menggunakan cache.

Lebih lanjut tentang membaca file dengan nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js: http://requirejs.org/

Ehvince
sumber
4
Jika Anda melakukan ini dengan bercanda, maka ingatlah untuk melakukan jest.dontMock('./data.json');atau hasilnya kosong. Mungkin bermanfaat bagi seseorang di luar sana :)
Håvard Geithus
1
Apa konteks kode ini? Apa yang Anda lakukan dengan json?
Drazen Bjelovuk
4
Mohon berikan contoh lengkap: Saya mendapat kesalahan:has not been loaded yet for context: _. Use require([])
shaijut
2
butuhkan tidak bekerja di browser karena modul node.js. jika OP ingin memuatnya di browser, sebaiknya gunakan fetch adalah solusi yang tepat.
sniffingdoggo
1
Ya, need adalah untuk node, tetapi requireJS dapat digunakan di browser juga: "RequireJS adalah file JavaScript dan pemuat modul. Ini dioptimalkan untuk penggunaan dalam browser, tetapi dapat digunakan di lingkungan JavaScript lain, seperti Badak dan Node. "
Per Quested Aronsson
97

Dengan cara yang lebih modern, Anda sekarang dapat menggunakan API Ambil :

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

Semua browser modern mendukung Fetch API. (Internet Explorer tidak, tetapi Edge melakukannya!)

sumber:

aloisdg pindah ke codidact.com
sumber
1
Saat menggunakan API Ambil, apakah Anda masih dilarang mengakses file lokal, kecuali jika Anda menonaktifkan pengaturan keamanan?
LarsH
3
@ LarsH Rupanya ya, saya mencobanya pagi ini dan mengambil api tidak dapat membaca file json lokal dengan file: // skema. Pendekatan ini terlihat sangat bersih tetapi Anda tidak dapat menggunakannya untuk file lokal
keysl
1
@keysl OK, saya kira mungkin harus seperti itu untuk alasan keamanan. (Dan Anda benar, maksud saya "dilarang mengakses file melalui file://skema.) Tapi itu pendekatan yang bagus dan bersih. Saya sudah mulai menggunakannya berkat jawaban ini.
LarsH
Anda tidak dapat mengakses file lokal dengan mengambil API
anton zlydenko
89

Jika Anda ingin membiarkan pengguna memilih file json lokal (di mana saja di sistem file), maka solusi berikut berfungsi.

Menggunakan FileReader dan JSON.parser (dan tanpa jquery).

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

Berikut adalah pengantar yang bagus tentang FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Trausti Kristjansson
sumber
4
FileReader API tidak didukung di IE 8 atau 9, tetapi semua browser lainnya adalah OK: caniuse.com/#search=filereader
northben
Ini berfungsi sempurna di Chrome, Anda akan melihat data Anda dinewArr
Belter
Jawaban ini bagus dan sedikit berbeda karena tidak menggunakan jQuery.
DigitalDesignDj
78

Jika Anda mencari sesuatu yang cepat dan kotor, hanya memuat data di kepala dokumen HTML Anda.

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

Saya harus menyebutkan bahwa ukuran tumpukan Anda (di Chrome) sekitar 4GB, jadi jika data Anda lebih besar dari itu, Anda harus mencari metode lain. Jika Anda ingin memeriksa peramban lain coba ini:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
jwerre
sumber
Anda benar bahwa AMD akan bekerja tetapi saya tidak berpikir AMD adalah solusi yang tepat di sini. yang paling sederhana adalah menggunakan $ .getJSON. terima kasih
Patrick Browne
7
@ PatrickBrowne ya, getJSON adalah solusi yang bagus tapi saya pikir dalam banyak kasus Anda akan mengalami masalah lintas-domain (memuat data dari S3 misalnya).
jwerre
Saya menemukan ini menjadi solusi yang paling sederhana bagi saya. File JSON terlihat hampir sama, jadi tidak ada kekacauan tambahan (hanya "var xyz =" di bagian paling atas file). Tidak ada yang menginginkan file data besar dalam kode mereka.
cslotty
Ini salah dalam banyak tingkatan, saya tidak mengerti bagaimana ia memiliki begitu banyak suara, di sini ia menjelaskan lebih banyak jika ada yang ingin melihat codepen.io/KryptoniteDove/post/… "Banyak contoh akan bukti bahwa Anda dapat mengakses data dengan fungsi sederhana seperti yang di bawah ini. Sebenarnya, apa ini sebenarnya bukan memuat dokumen JSON tetapi membuat objek Javascript. Teknik ini tidak akan berfungsi untuk file JSON yang sebenarnya. "
lesolorzanov
1
jujur ​​ini adalah solusi yang bagus jika Anda hanya memiliki beberapa data pra-kalengan dan Anda ingin melayani halaman statis
Evan Pu
19

Versi ES5

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

Versi ES6

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

xgqfrms
sumber
@Pier jika Anda menggunakan Server aplikasi lokal seperti Tomcat atau Xampp atau Jboss. pekerjaan naskah
Mirko Cianfarani
@MirkoCianfarani memang karena Anda tidak menggunakan file:///protokol dan file tidak dapat dianggap lokal lagi.
Dermaga
@xgqfrms Ambil API luar biasa!
xgqfrms
2
//xobj.status adalah integer xobj.status === "200" harus xobj.status === 200
yausername
@Yusername Anda benar, saya minta maaf untuk jenis kesalahan itu, dan itu sudah diperbaiki.
xgqfrms
14

Saya tidak percaya berapa kali pertanyaan ini dijawab tanpa memahami dan / atau mengatasi masalah dengan kode asli Poster Asli. Yang mengatakan, saya sendiri pemula (hanya 2 bulan coding). Kode saya berfungsi dengan baik, tetapi jangan ragu untuk menyarankan perubahan apa pun padanya. Inilah solusinya: 

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

Berikut cara menulis kode yang sama dengan yang saya berikan di atas:

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

Anda juga dapat menggunakan $ .ajax bukannya $ .getJSON untuk menulis kode dengan cara yang persis sama:

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

Akhirnya, cara terakhir untuk melakukan ini adalah dengan membungkus $ .ajax dalam suatu fungsi. Saya tidak dapat mengambil kredit untuk yang satu ini, tetapi saya memang memodifikasinya sedikit. Saya mengujinya dan berfungsi dan menghasilkan hasil yang sama dengan kode saya di atas. Saya menemukan solusi ini di sini -> memuat json ke dalam variabel

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

File test.json yang Anda lihat dalam kode saya di atas di-host di server saya dan berisi objek data json yang sama yang telah diposting olehnya (poster asli).

{
    "a" : "b",
    "c" : "d"
}
SpoonHonda
sumber
11

Saya terkejut impor dari ES6 belum disebutkan (digunakan dengan file kecil)

Ex: import test from './test.json'

webpack 2 <menggunakan json-loadersebagai default untuk .jsonfile.

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

Untuk TypeScript :

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

TS2307 (TS) Tidak dapat menemukan modul 'json-loader! ./ suburbs.json'

Untuk membuatnya bekerja, saya harus mendeklarasikan modul terlebih dahulu. Saya harap ini akan menghemat beberapa jam untuk seseorang.

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

...

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

Jika saya mencoba untuk menghilangkan loaderdari json-loadersaya mendapat kesalahan berikut dari webpack:

BREAKING CHANGE: Tidak boleh lagi menghilangkan akhiran '-loader' saat menggunakan loader. Anda perlu menentukan 'json-loader' dan bukan 'json', lihat https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Ogglas
sumber
1
mudah dan mudah.
Our_Benefactors
Anda tidak dapat menggunakan pernyataan impor es6 ketika halaman web dimuat dengan file: protokol.
Onno van der Zee
6

Coba dengan cara seperti itu (tetapi juga harap dicatat bahwa JavaScript tidak memiliki akses ke sistem file klien):

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

Menemukan utas ini ketika mencoba (tidak berhasil) untuk memuat file json lokal. Solusi ini bekerja untuk saya ...

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

... dan digunakan seperti ini ...

load_json("test2.html.js")

... dan ini adalah <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
TechSpud
sumber
2
Ini sepertinya tidak dapat digunakan kembali. Misalnya, jika file json dilayani oleh server jauh, batas waktu 100 ms mungkin tidak cukup untuk memuat. Dan karena waktu tergantung pada kecepatan koneksi klien, Anda harus menetapkan batas waktu yang sangat lama untuk klien dengan koneksi lambat. Singkatnya, setTimeout tidak boleh digunakan untuk menunggu pemuatan sumber daya.
Kenny806
1
Kenny806 - Ini dimaksudkan untuk menyelesaikan masalah tertentu - memuat sumber daya lokal (untuk halaman web yang bukan dihosting), jadi itu berarti itu tidak dapat digunakan kembali. Ada 1000 tentang solusi pemuatan sumber daya untuk halaman yang dihosting di web. Ini bukan yang solusi, itu sebuah solusi. Sangat mudah untuk mengubah batas waktu. Dengan menghapus batas waktu, apakah Anda menyarankan bahwa menunggu tanpa batas dapat diterima?
TechSpud
2
Saya tidak menyarankan menunggu tanpa batas, saya menyarankan menggunakan teknik yang memungkinkan Anda bereaksi terhadap pemuatan file segera setelah selesai. Masalah saya dengan batas waktu adalah bahwa Anda harus selalu menunggu sampai selesai. Bahkan jika file akan dimuat dalam 10 ms, Anda masih akan menunggu 100 ms. Dan ya, menyesuaikan batas waktu itu mudah, tetapi yang Anda sarankan adalah mengubah kode setiap kali Anda ingin memuat file yang berbeda atau ketika file mengubah ukuran (untuk mengoptimalkan penantian). Solusi seperti itu salah IMHO dan dapat menyebabkan banyak sakit kepala di masa depan, terutama ketika orang lain mencoba menggunakannya.
Kenny806
Siapa pun yang menggunakan skrip ini harus menggunakannya sebagai dasar untuk skrip mereka sendiri. Anda berhak atas pendapat Anda tentang apakah skrip ini salah. Mengapa tidak menyarankan solusi alternatif? Ini pasti tidak akan berfungsi untuk semua kasus penggunaan. Ini bekerja untuk saya, memuat file lokal dari halaman html lokal. Saya membagikan solusi saya pada pertanyaan ini, dengan harapan itu akan membantu orang lain. Apakah Anda mencoba memuat sumber daya lokal? Mengapa tidak meneruskan nilai batas waktu sebagai variabel, berdasarkan file yang Anda muat? Ajax pada file lokal sangat terbatas.
TechSpud
1
Anda mungkin lebih baik menggunakan perubahan pengaturan atau membebani onread dan memberi mereka fungsi. script.onload = functionname;
Shane Best
4

Di TypeScript Anda bisa menggunakan impor untuk memuat file JSON lokal. Misalnya memuat font.json:

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

Ini membutuhkan flag tsconfig --resolveJsonModule:

// tsconfig.json

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

Untuk informasi lebih lanjut, lihat catatan rilis naskah: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

teh.fonsi
sumber
Dapat menulis dengan lebih detail karena jawabannya agak tidak dapat dimengerti.
Teluk
3

Di sudut (atau kerangka kerja lain), Anda dapat memuat menggunakan http agar saya menggunakannya seperti ini:

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

Semoga ini membantu.

rajkiran
sumber
3

Apa yang saya lakukan adalah mengedit file JSON sedikit.

myfile.json => myfile.js

Dalam file JSON, (jadikan variabel JS)

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

Pada akhirnya,

export default x;

Kemudian,

import JsonObj from './myfile.js';

Supun Kavinda
sumber
3

Jika Anda menggunakan array lokal untuk JSON - seperti yang Anda tunjukkan dalam contoh Anda di pertanyaan (test.json) maka Anda bisa menggunakan parseJSON()metode JQuery ->

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

getJSON() digunakan untuk mendapatkan JSON dari situs jarak jauh - ini tidak akan berfungsi secara lokal (kecuali jika Anda menggunakan Server HTTP lokal)

Pastori
sumber
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
sumber
1

Suatu pendekatan yang saya suka gunakan adalah untuk melapisi / membungkus json dengan objek literal, dan kemudian menyimpan file dengan ekstensi file .jsonp. Metode ini juga membiarkan file json asli Anda (test.json) tidak diubah, karena Anda akan bekerja dengan file jsonp baru (test.jsonp) sebagai gantinya. Nama pada pembungkus bisa berupa apa saja, tetapi nama itu harus sama dengan fungsi panggilan balik yang Anda gunakan untuk memproses jsonp. Saya akan menggunakan test.json Anda yang diposting sebagai contoh untuk memperlihatkan tambahan jsonp wrapper untuk file 'test.jsonp'.

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

Selanjutnya, buat variabel yang dapat digunakan kembali dengan cakupan global di skrip Anda untuk menahan JSON yang dikembalikan. Ini akan membuat data JSON yang dikembalikan tersedia untuk semua fungsi lain dalam skrip Anda alih-alih hanya fungsi panggilan balik.

var myJSON;

Berikutnya adalah fungsi sederhana untuk mengambil json Anda dengan injeksi skrip. Perhatikan bahwa kita tidak dapat menggunakan jQuery di sini untuk menambahkan skrip ke kepala dokumen, karena IE tidak mendukung metode jQuery .append. Metode jQuery yang dikomentari dalam kode di bawah ini akan berfungsi pada browser lain yang mendukung metode .append. Itu dimasukkan sebagai referensi untuk menunjukkan perbedaan.

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

Berikutnya adalah fungsi panggilan balik pendek dan sederhana (dengan nama yang sama dengan pembungkus jsonp) untuk mendapatkan data hasil json ke dalam variabel global.

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

Data json sekarang dapat diakses oleh berbagai fungsi skrip menggunakan notasi titik. Sebagai contoh:

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

Metode ini mungkin sedikit berbeda dari yang biasa Anda lihat, tetapi memiliki banyak keuntungan. Pertama, file jsonp yang sama dapat dimuat secara lokal atau dari server menggunakan fungsi yang sama. Sebagai bonus, jsonp sudah dalam format ramah lintas domain dan juga dapat dengan mudah digunakan dengan API jenis REST.

Memang, tidak ada fungsi penanganan kesalahan, tetapi mengapa Anda membutuhkannya? Jika Anda tidak dapat memperoleh data json menggunakan metode ini, maka Anda bisa bertaruh Anda memiliki beberapa masalah di dalam json itu sendiri, dan saya akan memeriksanya pada validator JSON yang bagus.

Pencerahan
sumber
1

Anda dapat menempatkan json Anda di file javascript. Ini dapat dimuat secara lokal (bahkan di Chrome) menggunakan jQuery'sgetScript() fungsi .

file map-01.js:

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

keluaran:

world width: 500

Perhatikan bahwa variabel json dideklarasikan dan ditugaskan dalam file js.

Victor Stoddard
sumber
0

Saya belum menemukan solusi apa pun menggunakan pustaka Penutupan Google. Jadi hanya untuk melengkapi daftar untuk calon pengunjung, inilah cara Anda memuat JSON dari file lokal dengan pustaka Closure:

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

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

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

Saya melakukan ini untuk aplikasi cordova saya, seperti saya membuat file javascript baru untuk JSON dan menempelkan data JSON ke dalam String.rawkemudian menguraikannya denganJSON.parse

Astaga
sumber
Jika itu file javascript, mengapa objek melakukannya dan tidak hanya menggunakan JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
Nuno André
Saya menggunakannya karena saya mengambil beberapa data json menggunakan ajax, yang muncul sebagai string, jadi saya gunakan JSON.parseuntuk mengonversi ke objek JavaScript
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");

Apa yang saya lakukan adalah, pertama-tama, dari tab jaringan, merekam lalu lintas jaringan untuk layanan, dan dari badan respons, menyalin dan menyimpan objek json dalam file lokal. Kemudian memanggil fungsi dengan nama file lokal, Anda harus dapat melihat objek json di jsonOutout di atas.

Feng Zhang
sumber
2
Tolong jelaskan solusi Anda alih-alih hanya menempelkan kode. Hanya solusi yang menjelaskan bagaimana menyelesaikan masalah yang akan membantu masyarakat.
gmuraleekrishna
Catatan: Membutuhkan InternetExplorer
Sancarn
0

Apa yang berhasil untuk saya adalah sebagai berikut:

Memasukkan: 

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

Kode Javascript: 

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

Jika Anda memasang Python di mesin lokal Anda (atau Anda tidak keberatan menginstalnya), berikut ini solusi untuk masalah browser-independen untuk masalah akses file JSON lokal yang saya gunakan:

Ubah file JSON menjadi JavaScript dengan membuat fungsi yang mengembalikan data sebagai objek JavaScript. Kemudian Anda dapat memuatnya dengan tag <script> dan memanggil fungsi untuk mendapatkan data yang Anda inginkan.

Di sinilah kode Python

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
sumber