Đang tải tệp JSON cục bộ

322

Tôi đang cố tải một tệp JSON cục bộ nhưng nó sẽ không hoạt động. Đây là mã JavaScript của tôi (sử dụng jQuery:

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

Tệp test.json:

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

Không có gì được hiển thị và Fireorms cho tôi biết rằng dữ liệu không được xác định. Trong Fireorms tôi có thể thấy json.responseTextvà nó tốt và hợp lệ, nhưng thật lạ khi tôi sao chép dòng:

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

trong bảng điều khiển của Fireorms, nó hoạt động và tôi có thể truy cập dữ liệu.

Bất cứ ai cũng có một giải pháp?

javascript  jquery  json  firebug  local-files 
— Patrick Browne
nguồn
Khi bạn trả về một JSONchuỗi bạn đã truy xuất một đối tượng javascript, không cần sử dụng eval().
— yoda
1
Bạn gọi tập tin json "cục bộ" là gì? cục bộ trên trình duyệt hoặc máy chủ?
— seppo0010
2
Bạn đã không cung cấp cho chúng tôi đủ chi tiết. Tệp test.jsonkhông chỉ định bất kỳ đường dẫn nào, do đó, nó là một URI tương đối, liên quan đến vị trí của trang truy cập nó. Vì vậy, như @ seppo0010 nói rằng nó sẽ là cục bộ của máy chủ nếu trang nằm trên một máy chủ từ xa ở đâu đó và nó sẽ liên quan đến máy tính của bạn nếu trang nằm trong hệ thống tệp cục bộ của bạn được file://giao thức truy cập .
— hà mã

Câu trả lời:

292

$.getJSON không đồng bộ nên bạn nên làm:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
— seppo0010
nguồn
47
Bạn có thực sự được phép truy cập một tập tin cục bộ?
— maasha
3
Không, nó không thể là tập tin nhưng phải được phục vụ bởi máy chủ web.
— Kris Erickson
15
Chuẩn xác. Bảo mật Chromes chặt chẽ hơn nhiều so với Firefox hoặc các loại khác. Tải bất cứ thứ gì bằng xhr, Josn, Xml, v.v ... hầu như đều bị khóa trong Chrome ngoại trừ một hoặc hai thứ.
— choàng
1
Tôi đã thử điều này, nhưng không có may mắn. Cũng không có lỗi trong bảng điều khiển :(
— Govind Kailas
11
Tôi khuyên bạn nên sử dụng myjson.com để tải lên tệp cục bộ của mình và truy cập tệp từ trình duyệt chrome.
— Lập trình viên hóa học
167

Tôi có cùng nhu cầu (để kiểm tra ứng dụng angularjs của tôi) và cách duy nhất tôi tìm thấy là sử dụng allow.js:

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

lưu ý: tệp được tải một lần, các cuộc gọi tiếp theo sẽ sử dụng bộ đệm.

Tìm hiểu thêm về cách đọc tệp với nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

Yêu cầu: http://requirejs.org/

— Hoàng tử
nguồn
4
Nếu bạn đang làm điều này với trò hề, thì hãy nhớ làm jest.dontMock('./data.json');nếu không kết quả sẽ trống. Có thể hữu ích cho ai đó ngoài kia :)
— Håvard Geithus
1
Bối cảnh của mã này là gì? Bạn sẽ làm gì với json?
— Drazen Bjelovuk
4
Vui lòng cung cấp ví dụ đầy đủ: Tôi đang gặp lỗi:has not been loaded yet for context: _. Use require([])
— shaijut
2
Yêu cầu không hoạt động trên trình duyệt vì đó là mô-đun node.js. Nếu OP muốn tải nó trong trình duyệt, nên sử dụng tìm nạp là giải pháp phù hợp.
— sniffingdoggo
1
Có, yêu cầu là cho nút, nhưng cũng có thể sử dụng requestJS trong các trình duyệt: "RequireJS là một trình tải tệp và mô-đun JavaScript. Nó được tối ưu hóa để sử dụng trong trình duyệt, nhưng nó có thể được sử dụng trong các môi trường JavaScript khác, như Rhino và Node. "
— Per Quested Aronsson
97

Theo cách hiện đại hơn, giờ đây bạn có thể sử dụng API tìm nạp :

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

Tất cả các trình duyệt hiện đại đều hỗ trợ Fetch API. (Internet Explorer thì không, nhưng Edge thì có!)

nguồn:

— aloisdg chuyển đến codidact.com
nguồn
1
Khi sử dụng API tìm nạp, bạn vẫn bị cấm truy cập các tệp cục bộ, trừ khi bạn tắt cài đặt bảo mật?
— LarsH
3
@LarsH Rõ ràng là có, tôi đã thử nó sáng nay và tìm nạp api không thể đọc tệp json cục bộ với tệp: // lược đồ. Cách tiếp cận này trông rất rõ ràng nhưng bạn không thể sử dụng nó cho các tệp cục bộ
— keyl
1
@keysl OK, tôi đoán có lẽ nó phải như vậy vì lý do bảo mật. (Và bạn nói đúng, tôi có nghĩa là "bị cấm truy cập các tệp thông qua file://lược đồ.) Nhưng đó là một cách tiếp cận sạch đẹp. Tôi đã bắt đầu sử dụng nó nhờ câu trả lời này.
— LarsH
Bạn không thể truy cập các tệp cục bộ bằng API tìm nạp
— anton zlydenko
89

Nếu bạn muốn cho phép người dùng chọn tệp json cục bộ (bất kỳ nơi nào trên hệ thống tệp), thì giải pháp sau sẽ hoạt động.

Nó sử dụng FileReader và JSON.parser (và không có 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>

Đây là một phần giới thiệu tốt về FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

— Trausti Kristjansson
nguồn
4
API FileReader không được hỗ trợ trong IE 8 hoặc 9, nhưng tất cả các trình duyệt khác đều ổn: caniuse.com/#search=filereader
— southben
Nó hoạt động hoàn hảo trong Chrome, bạn sẽ thấy dữ liệu của mình trongnewArr
— Belter
Câu trả lời này rất hay và hơi khác một chút vì nó không sử dụng jQuery.
— DigitalDesignDj
78

Nếu bạn đang tìm kiếm thứ gì đó nhanh và bẩn, chỉ cần tải dữ liệu vào phần đầu của tài liệu HTML.

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

Tôi nên đề cập rằng kích thước heap của bạn (trong Chrome) là khoảng 4GB, vì vậy nếu dữ liệu của bạn lớn hơn mức đó, bạn nên tìm một phương pháp khác. Nếu bạn muốn kiểm tra một trình duyệt khác, hãy thử điều này:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
— jwerre
nguồn
bạn đúng rằng AMD sẽ hoạt động nhưng tôi không nghĩ AMD là giải pháp phù hợp ở đây. đơn giản nhất là sử dụng $ .getJSON. cảm ơn
— Patrick Browne
7
@PatrickBrowne có, getJSON là một giải pháp tốt nhưng tôi nghĩ trong nhiều trường hợp bạn sẽ gặp phải vấn đề liên tên miền (ví dụ tải dữ liệu từ S3).
— jwerre
Tôi thấy đây là giải pháp đơn giản nhất đối với tôi. Tệp JSON trông gần giống nhau, vì vậy không có sự lộn xộn thêm (chỉ có một "var xyz =" ở trên cùng của tệp). Không ai muốn một tệp dữ liệu lớn trong mã của họ.
— cslotty
Điều này sai ở nhiều cấp độ, tôi không hiểu làm thế nào nó có nhiều phiếu như vậy, ở đây nó giải thích thêm nếu có ai muốn xem codepen.io/KryptoniteDove/post/iêu "Nhiều ví dụ sẽ chứng minh rằng bạn có thể truy cập dữ liệu bằng một Hàm đơn giản như hàm bên dưới. Thực tế, cái này thực sự không tải tài liệu JSON mà là tạo đối tượng Javascript. Kỹ thuật này sẽ không hoạt động đối với các tệp JSON thực. "
— lesolorzanov
1
Thành thật mà nói đây là một giải pháp tuyệt vời nếu bạn chỉ có một số dữ liệu đóng hộp sẵn và bạn muốn phục vụ một trang tĩnh
— Evan Pu
19

Phiên bản 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);
    });
}

Phiên bản 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);
    });
}
Mở rộng đoạn trích

— xgqfrms
nguồn
@Pier nếu bạn sử dụng Máy chủ ứng dụng cục bộ như Tomcat hoặc Xampp hoặc Jboss. kịch bản hoạt động
— Mirko Cianfarani
@MirkoCianfarani thực sự bởi vì bạn không sử dụng file:///giao thức và tệp không thể được coi là cục bộ nữa.
— Cầu tàu
@xgqfrms API tìm nạp thật tuyệt vời!
— xgqfrms
2
//xobj.status là số nguyên xobj.status === "200" nên là xobj.status === 200
— tên người dùng 22/03/18
@yausername bạn đúng, tôi xin lỗi vì loại trạng thái lỗi đó và nó đã được sửa.
— xgqfrms
14

Tôi không thể tin được bao nhiêu lần câu hỏi này đã được trả lời mà không hiểu và / hoặc giải quyết vấn đề với mã thực tế của Poster gốc. Điều đó nói rằng, bản thân tôi là người mới bắt đầu (chỉ 2 tháng mã hóa). Mã của tôi hoạt động hoàn hảo, nhưng hãy đề nghị bất kỳ thay đổi nào đối với nó. Đây là giải pháp: 

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

Đây là một cách viết ngắn hơn cùng mã tôi đã cung cấp ở trên:

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

Bạn cũng có thể sử dụng $ .ajax thay vì $ .getJSON để viết mã chính xác theo cùng một cách:

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

Cuối cùng, cách cuối cùng để làm điều này là bọc $ .ajax trong một hàm. Tôi không thể lấy tín dụng cho cái này, nhưng tôi đã sửa đổi nó một chút. Tôi đã thử nghiệm nó và nó hoạt động và tạo ra kết quả giống như mã của tôi ở trên. Tôi tìm thấy giải pháp này ở đây -> tải json vào biến

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

Tệp test.json mà bạn thấy trong mã của tôi ở trên được lưu trữ trên máy chủ của tôi và chứa cùng một đối tượng dữ liệu json mà anh ấy (người đăng ban đầu) đã đăng.

{
    "a" : "b",
    "c" : "d"
}
— Muỗng
nguồn
11

Tôi ngạc nhiên khi nhập từ es6 đã không được đề cập (sử dụng với các tệp nhỏ)

Ví dụ: import test from './test.json'

webpack 2 <sử dụng json-loaderlàm mặc định cho.json các tệp.

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

Đối với TypeScript :

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

TS2307 (TS) Không thể tìm thấy mô-đun 'json-loader! ./ suburb.json'

Để nó hoạt động tôi phải khai báo mô-đun trước. Tôi hy vọng điều này sẽ tiết kiệm một vài giờ cho một ai đó.

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

...

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

Nếu tôi cố gắng bỏ qua loadertừ json-loadertôi đã nhận lỗi sau đây từ webpack:

THAY ĐỔI THAY ĐỔI: Không còn được phép bỏ qua hậu tố '-loader' khi sử dụng bộ tải. Bạn cần chỉ định 'json-loader' thay vì 'json', xem https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-remond

— Ogglas
nguồn
1
dễ dàng và đơn giản
— Our_Benefactors
Bạn không thể sử dụng câu lệnh nhập es6 khi trang web được tải với tệp: giao thức.
— Onno van der Zee
6

Thử là cách như vậy (nhưng cũng xin lưu ý rằng JavaScript không có quyền truy cập vào hệ thống tệp khách hàng):

$.getJSON('test.json', function(data) {
  console.log(data);
});
— Samich
nguồn
4

Tìm thấy chủ đề này khi cố gắng (không thành công) để tải một tệp json cục bộ. Giải pháp này hiệu quả với tôi ...

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

... và được sử dụng như thế này ...

load_json("test2.html.js")

... và đây là <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
— TechSpud
nguồn
2
Điều này dường như không thể tái sử dụng. Ví dụ: nếu tệp json được phục vụ bởi một máy chủ từ xa, thời gian chờ 100ms có thể không đủ để tải. Và vì thời gian phụ thuộc vào tốc độ kết nối của máy khách, bạn sẽ phải đặt thời gian chờ rất dài cho các máy khách có kết nối chậm. Nói tóm lại, setTimeout không nên được sử dụng để chờ tải tài nguyên.
— Kenny806
1
Kenny806 - Điều này có nghĩa là để giải quyết một vấn đề cụ thể - tải tài nguyên cục bộ (đối với một trang web không được lưu trữ), vì vậy điều đó có nghĩa là nó không thể tái sử dụng được. Có 1000 giải pháp tải tài nguyên cho các trang được lưu trữ trên web. Đây không phải là giải pháp, nó là một giải pháp. Thật đơn giản để thay đổi thời gian chờ. Bằng cách loại bỏ thời gian chờ, bạn có gợi ý rằng một sự chờ đợi vô hạn có thể chấp nhận được không?
— TechSpud
2
Tôi không đề xuất một sự chờ đợi vô hạn, tôi đề nghị sử dụng một kỹ thuật cho phép bạn phản ứng với tải tập tin ngay khi nó kết thúc. Vấn đề của tôi với thời gian chờ là, bạn luôn phải chờ nó kết thúc. Ngay cả khi tệp đã được tải trong 10ms, bạn vẫn sẽ đợi trong 100ms. Và có, điều chỉnh thời gian chờ là dễ dàng, nhưng những gì bạn đang đề xuất là thay đổi mã mỗi lần bạn muốn tải một tệp khác hoặc khi tệp siize thay đổi (để tối ưu hóa chờ đợi). Một giải pháp như vậy là IMHO sai và có thể gây ra rất nhiều vấn đề đau đầu trong tương lai, đặc biệt là khi người khác cố gắng sử dụng nó.
— Kenny806
Bất cứ ai sử dụng tập lệnh này nên sử dụng nó làm cơ sở cho các tập lệnh riêng của họ. Bạn có quyền với ý kiến ​​của bạn về việc kịch bản này là sai. Tại sao không đề xuất một giải pháp thay thế? Điều này chắc chắn sẽ không làm việc cho tất cả các trường hợp sử dụng. Nó làm việc cho tôi, tải một tệp cục bộ từ một trang html cục bộ. Tôi đã chia sẻ giải pháp của mình cho câu hỏi này, với hy vọng nó sẽ giúp được người khác. Bạn đang cố gắng tải một tài nguyên địa phương? Tại sao không chuyển vào giá trị thời gian chờ dưới dạng một biến, dựa trên tệp bạn đang tải? Ajax trên các tệp cục bộ là khá hạn chế.
— TechSpud
1
Bạn có thể tốt hơn bằng cách sử dụng onreadystatechange hoặc onload và cung cấp cho họ một chức năng. script.onload = functionname;
— Shane tốt nhất
4

Trong TypeScript, bạn có thể sử dụng nhập để tải các tệp JSON cục bộ. Ví dụ: tải một font.json:

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

Điều này yêu cầu cờ tsconfig --resolveJsonModule:

// tsconfig.json

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

Để biết thêm thông tin, hãy xem ghi chú phát hành của bản thảo: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

— teh.fonsi
nguồn
Có thể viết với nhiều chi tiết hơn vì câu trả lời là một chút không rõ ràng dễ hiểu.
— Bay
3

Trong góc (hoặc bất kỳ khung nào khác), bạn có thể tải bằng http, tôi sử dụng nó như thế này:

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

Hi vọng điêu nay co ich.

— rajkiran
nguồn
3

Những gì tôi đã làm là chỉnh sửa tệp JSON một chút.

myfile.json => myfile.js

Trong tệp JSON, (biến nó thành một biến JS)

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

Cuối cùng,

export default x;

Sau đó,

import JsonObj from './myfile.js';

— Supun Kavinda
nguồn
3

Nếu bạn đang sử dụng một mảng cục bộ cho JSON - như bạn đã thể hiện trong ví dụ của mình trong câu hỏi (test.json) thì bạn có thể là parseJSON()phương thức của JQuery ->

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

getJSON() được sử dụng để nhận JSON từ một trang web từ xa - nó sẽ không hoạt động cục bộ (trừ khi bạn đang sử dụng Máy chủ HTTP cục bộ)

— Manse
nguồn
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
nguồn
1

Một cách tiếp cận tôi muốn sử dụng là đệm / bọc json bằng một đối tượng bằng chữ, và sau đó lưu tệp với phần mở rộng tệp .jsonp. Phương thức này cũng không thay đổi tệp json gốc (test.json) của bạn, vì bạn sẽ làm việc với tệp jsonp mới (test.jsonp) thay thế. Tên trên trình bao bọc có thể là bất cứ điều gì, nhưng nó cần phải cùng tên với chức năng gọi lại mà bạn sử dụng để xử lý jsonp. Tôi sẽ sử dụng test.json của bạn được đăng làm ví dụ để hiển thị bổ sung trình bao bọc jsonp cho tệp 'test.jsonp'.

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

Tiếp theo, tạo một biến có thể sử dụng lại với phạm vi toàn cầu trong tập lệnh của bạn để giữ JSON được trả về. Điều này sẽ làm cho dữ liệu JSON được trả về có sẵn cho tất cả các chức năng khác trong tập lệnh của bạn thay vì chỉ có chức năng gọi lại.

var myJSON;

Tiếp đến là một chức năng đơn giản để lấy json của bạn bằng cách tiêm script. Lưu ý rằng chúng ta không thể sử dụng jQuery ở đây để nối tập lệnh vào đầu tài liệu, vì IE không hỗ trợ phương thức jQuery .append. Phương thức jQuery nhận xét trong đoạn mã dưới đây sẽ hoạt động trên các trình duyệt khác hỗ trợ phương thức .append. Nó được bao gồm như một tài liệu tham khảo để hiển thị sự khác biệt.

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

Tiếp theo là một hàm gọi lại ngắn và đơn giản (có cùng tên với trình bao bọc jsonp) để lấy dữ liệu kết quả json vào biến toàn cục.

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

Bây giờ dữ liệu json có thể được truy cập bởi bất kỳ chức năng nào của tập lệnh bằng cách sử dụng ký hiệu dấu chấm. Ví dụ:

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

Phương pháp này có thể hơi khác so với những gì bạn đã từng thấy, nhưng có nhiều ưu điểm. Đầu tiên, cùng một tệp jsonp có thể được tải cục bộ hoặc từ một máy chủ sử dụng các chức năng tương tự. Như một phần thưởng, jsonp đã ở định dạng thân thiện giữa các miền và cũng có thể dễ dàng sử dụng với API loại REST.

Cấp, không có chức năng xử lý lỗi, nhưng tại sao bạn cần một chức năng? Nếu bạn không thể lấy dữ liệu json bằng phương pháp này, thì bạn có thể cá rằng bạn có một số vấn đề trong chính json và tôi sẽ kiểm tra nó trên trình xác nhận JSON tốt.

— Hiển linh
nguồn
1

Bạn có thể đặt json của bạn trong một tệp javascript. Điều này có thể được tải cục bộ (ngay cả trong Chrome) bằng cách sử dụng jQuerygetScript() chức năng .

tệp 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);
    });

đầu ra:

world width: 500

Lưu ý rằng biến json được khai báo và gán trong tệp js.

— Victor Stoddard
nguồn
0

Tôi chưa tìm thấy bất kỳ giải pháp nào khi sử dụng thư viện Đóng cửa của Google. Vì vậy, chỉ để hoàn thành danh sách cho các khách hàng tiềm năng trong tương lai, đây là cách bạn tải JSON từ tệp cục bộ với thư viện Đóng:

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
nguồn
0 

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

console.log(obj[0]["name"]);
Mở rộng đoạn trích

Tôi đã làm điều này cho ứng dụng cordova của mình, như tôi đã tạo một tệp javascript mới cho JSON và dán dữ liệu JSON vào String.rawsau đó phân tích nó vớiJSON.parse

— Jeeva
nguồn
Nếu đó là tệp javascript, tại sao lại làm một đối tượng như vậy và không chỉ đơn giản sử dụng JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
— Nuno André
Tôi đã sử dụng nó beause Tôi đã lấy một số dữ liệu json bằng cách sử dụng ajax, dưới dạng chuỗi, vì vậy tôi sử dụng JSON.parseđể chuyển đổi thành đối tượng 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");

Những gì tôi đã làm là, trước hết, từ tab mạng, ghi lại lưu lượng truy cập mạng cho dịch vụ và từ phần thân phản hồi, sao chép và lưu đối tượng json trong một tệp cục bộ. Sau đó gọi hàm với tên tệp cục bộ, bạn sẽ có thể thấy đối tượng json trong jsonOutout ở trên.

— Phong Trương
nguồn
2
Vui lòng giải thích giải pháp của bạn thay vì chỉ dán mã. Chỉ có một giải pháp giải thích làm thế nào nó giải quyết vấn đề sẽ giúp cộng đồng.
— gmuraleekrishna
Lưu ý: Yêu cầu InternetExplorer
— Sancarn
0

Những gì làm việc cho tôi là như sau:

Đầu vào: 

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

Mã 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
nguồn
-4

Nếu bạn đã cài đặt Python trên máy cục bộ của mình (hoặc bạn không cài đặt một cái), đây là cách giải quyết độc lập với trình duyệt cho vấn đề truy cập tệp JSON cục bộ mà tôi sử dụng:

Chuyển đổi tệp JSON thành JavaScript bằng cách tạo một hàm trả về dữ liệu dưới dạng đối tượng JavaScript. Sau đó, bạn có thể tải nó bằng thẻ <script> và gọi hàm để lấy dữ liệu bạn muốn.

Đây là mã 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]')
— giáo lý
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.