로컬 JSON 파일로드
로컬 JSON 파일을로드하려고하는데 작동하지 않습니다. 다음은 jQuery를 사용하는 JavaScript 코드입니다.
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
test.json 파일 :
{"a" : "b", "c" : "d"}
아무것도 표시되지 않으며 Firebug는 데이터가 정의되지 않았다고 알려줍니다. Firebug에서 볼 수 json.responseText있고 훌륭하고 유효하지만 줄을 복사하면 이상합니다.
var data = eval("(" +json.responseText + ")");
Firebug의 콘솔에서 작동하며 데이터에 액세스 할 수 있습니다.
누구든지 해결책이 있습니까?
$.getJSON 비동기식이므로 다음을 수행해야합니다.
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
angularjs 앱을 테스트하기 위해 동일한 요구가 있었고 내가 찾은 유일한 방법은 require.js를 사용하는 것입니다.
var json = require('./data.json'); //(with path)
참고 : 파일이 한 번로드되면 추가 호출에서 캐시를 사용합니다.
nodejs로 파일을 읽는 방법에 대한 자세한 내용 : http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs
require.js : http://requirejs.org/
사용자가 파일 시스템의 어느 곳에서나 로컬 json 파일을 선택하게하려면 다음 솔루션이 작동합니다.
FileReader 및 JSON.parser를 사용하며 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>
다음은 FileReader에 대한 좋은 소개입니다. http://www.html5rocks.com/en/tutorials/file/dndfiles/
보다 현대적인 방식으로 Fetch API를 사용할 수 있습니다 .
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
모든 최신 브라우저는 Fetch API를 지원합니다. (Internet Explorer는 그렇지 않지만 Edge는 그렇지 않습니다!)
출처:
빠르고 더러운 것을 찾고 있다면 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"}
})()
ace.webgeeker.xyz
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 버전
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);
});
}Original Poster의 실제 코드 문제를 이해하거나 해결하지 않고이 질문에 몇 번이나 대답했는지 믿을 수 없습니다. 즉, 나는 초보자입니다 (2 개월의 코딩 만). 내 코드는 완벽하게 작동하지만 변경 사항을 자유롭게 제안하십시오. 해결책은 다음과 같습니다.
//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);
위에서 제공 한 것과 동일한 코드를 작성하는 더 짧은 방법은 다음과 같습니다.
var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
$ .getJSON 대신 $ .ajax를 사용하여 동일한 방식으로 코드를 작성할 수도 있습니다.
var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
마지막 으로이 작업을 수행하는 마지막 방법 은 $ .ajax를 함수로 묶는 것입니다. 나는 이것을 인정 할 수는 없지만 조금 수정했습니다. 나는 그것을 테스트하고 작동하며 위의 코드와 동일한 결과를 생성합니다. 이 솔루션을 여기에서 찾았습니다-> 변수에 json로드
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);
test.json의 위 내 코드에서 볼 파일 내 서버에서 호스팅 그는 (원본 포스터)에 게시 한 것과 같은 JSON 데이터 객체를 포함합니다.
{
"a" : "b",
"c" : "d"
}
es6에서 가져 오기가 언급되지 않은 것에 놀랐습니다 (작은 파일과 함께 사용)
전의: import test from './test.json'
webpack 2 <는 파일의 json-loader기본값을 사용 .json합니다.
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore
대한 타이프 라이터 :
import test from 'json-loader!./test.json';
TS2307 (TS) 'json-loader! ./ suburbs.json'모듈을 찾을 수 없습니다
제대로 작동하려면 먼저 모듈을 선언해야했습니다. 이것이 누군가를 위해 몇 시간을 절약하기를 바랍니다.
declare module "json-loader!*" {
let json: any;
export default json;
}
...
import test from 'json-loader!./test.json';
내가 생략하려고 경우 loader에서 json-loader나는 다음과 같은 오류에서 가져온 webpack:
BREAKING CHANGE : 로더 사용시 더 이상 '로더'접미사를 생략 할 수 없습니다. 'json'대신 'json-loader'를 지정해야합니다. https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed를 참조 하십시오.
시도는 그런 식입니다 (그러나 JavaScript는 클라이언트 파일 시스템에 액세스 할 수 없습니다).
$.getJSON('test.json', function(data) {
console.log(data);
});
최근 D3js 는 로컬 json 파일을 처리 할 수 있습니다.
이것은 https://github.com/mbostock/d3/issues/673 문제입니다
이것은 D3이 로컬 json 파일과 작동하도록하기위한 패치입니다. https://github.com/mbostock/d3/pull/632
로컬 json 파일을로드하려고 시도 할 때이 스레드를 찾았습니다. 이 솔루션은 나를 위해 일했습니다 ...
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)
}
... 이처럼 사용됩니다 ...
load_json("test2.html.js")
... 그리고 이것은 <head>...
<head>
<script type="text/javascript" src="test.html.js" class="json"></script>
</head>
TypeScript에서는 import를 사용하여 로컬 JSON 파일을로드 할 수 있습니다. 예를 들어 font.json로드
import * as fontJson from '../../public/fonts/font_name.json';
tsconfig 플래그 --resolveJsonModule이 필요합니다.
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true
}
}
자세한 내용은 typescript의 릴리스 노트를 참조하십시오. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html
각도 (또는 다른 프레임 워크)에서 http를 사용하여로드 할 수 있습니다.
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
도움이 되었기를 바랍니다.
$.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_);
}
});
}
});
JSON에 로컬 배열을 사용하는 경우-질문 (test.json)의 예에서 알 수 있듯이 parseJSONJQuery 의 방법입니다.
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON 원격 사이트에서 JSON을 가져 오는 데 사용됩니다-로컬 HTTP 서버를 사용하지 않는 한 로컬에서 작동하지 않습니다.
Google의 폐쇄 라이브러리를 사용하는 솔루션을 찾지 못했습니다. 미래의 비 스터 목록을 완성하려면 클로저 라이브러리를 사용하여 로컬 파일에서 JSON을로드하는 방법은 다음과 같습니다.
goog.net.XhrIo.send('../appData.json', function(evt) {
var xhr = evt.target;
var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
console.log(obj);
});
내가 사용하는 접근법은 json을 객체 리터럴로 패딩 / 랩핑 한 다음 파일 확장자를 .jsonp로 저장하는 것입니다. 대신 새 jsonp 파일 (test.jsonp)로 작업 할 것이므로이 방법을 사용하면 원래 json 파일 (test.json)도 변경되지 않습니다. 랩퍼의 이름은 무엇이든 가능하지만 jsonp를 처리하는 데 사용하는 콜백 함수와 동일한 이름이어야합니다. 예를 들어 test.json을 사용하여 'test.jsonp'파일의 jsonp 래퍼 추가를 보여줍니다.
json_callback({"a" : "b", "c" : "d"});
그런 다음 스크립트에서 전역 범위로 재사용 가능한 변수를 작성하여 리턴 된 JSON을 보유하십시오. 그러면 콜백 함수 대신 스크립트의 다른 모든 함수에서 반환 된 JSON 데이터를 사용할 수 있습니다.
var myJSON;
다음은 스크립트 삽입으로 json을 검색하는 간단한 함수입니다. IE는 jQuery .append 메소드를 지원하지 않으므로 여기서 jQuery를 사용하여 스크립트를 문서 헤드에 추가 할 수 없습니다. 아래 코드에서 주석 처리 된 jQuery 메소드는 .append 메소드를 지원하는 다른 브라우저에서 작동합니다. 차이점을 보여주기 위해 참조로 포함됩니다.
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)
}
다음은 json 결과 데이터를 전역 변수로 가져 오는 짧고 간단한 콜백 함수 (jsonp 래퍼와 동일한 이름)입니다.
function json_callback(response){
myJSON = response; // Clone response JSON to myJSON object
$('#json_script').remove(); // Remove json_script from the document
}
도트 표기법을 사용하여 스크립트의 모든 기능으로 json 데이터에 액세스 할 수 있습니다. 예로서:
console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console
이 방법은 사용하는 방법과 약간 다를 수 있지만 많은 장점이 있습니다. 먼저 동일한 jsonp 파일을 동일한 기능을 사용하여 로컬 또는 서버에서로드 할 수 있습니다. 보너스로 jsonp는 이미 도메인 간 친화적 형식이며 REST 유형 API와 함께 쉽게 사용할 수 있습니다.
물론 오류 처리 기능은 없지만 왜 필요한가? 이 방법으로 json 데이터를 얻을 수 없다면 json 자체에 문제가 있다고 생각할 수 있습니다. 좋은 JSON 유효성 검사기에서 확인하십시오.
자바 스크립트 파일에 json을 넣을 수 있습니다. jQuery의 getScript()기능을 사용하여 로컬에서도 (Chrome에서도)로드 할 수 있습니다 .
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);
});
산출:
world width: 500
json 변수는 js 파일에서 선언되고 할당됩니다.
json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);
console.log(obj[0]["name"]);JSON에 대한 새 자바 스크립트 파일을 만들고 JSON 데이터를 붙여 넣은 String.raw다음 코드를 파싱하는 것처럼 Cordova 앱 에서이 작업을 수행 했습니다.JSON.parse
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");
내가 한 것은 무엇보다도 네트워크 탭에서 서비스의 네트워크 트래픽을 기록하고 응답 본문에서 json 객체를 로컬 파일로 복사하여 저장하는 것이 었습니다. 그런 다음 로컬 파일 이름으로 함수를 호출하면 위의 jsonOutout에서 json 객체를 볼 수 있습니다.
나를 위해 일한 것은 다음과 같습니다.
입력:
http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json
자바 스크립트 코드 :
<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, '&').replace(/</g, '<').replace(/>/g, '>');
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>
내가 한 것은 JSON 파일을 약간 편집하는 것이 었습니다.
myfile.json => myfile.js
JSON 파일에서 (JS 변수로 만듭니다)
{name: "Whatever"} => var x = {name: "Whatever"}
결국
export default x;
그때,
import JsonObj from './myfile.js';
로컬 컴퓨터에 Python이 설치되어 있거나 설치하지 않아도되는 경우 사용하는 로컬 JSON 파일 액세스 문제에 대한 브라우저 독립적 해결 방법은 다음과 같습니다.
데이터를 JavaScript 객체로 반환하는 함수를 만들어 JSON 파일을 JavaScript로 변환하십시오. 그런 다음 <script> 태그로로드하고 함수를 호출하여 원하는 데이터를 얻을 수 있습니다.
여기 파이썬 코드 가 온다
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]')
참고 URL : https://stackoverflow.com/questions/7346563/loading-local-json-file
'Programing' 카테고리의 다른 글
| package.json에없는 패키지의 node_modules 폴더를 청소하는 방법은 무엇입니까? (0) | 2020.03.19 |
|---|---|
| “git --bare init”저장소를 어떻게 사용합니까? (0) | 2020.03.19 |
| C #의 디렉토리에있는 모든 파일을 재귀 적으로 나열하는 방법은 무엇입니까? (0) | 2020.03.19 |
| ASP.NET MVC보기에서 현재 작업을 어떻게 반환 할 수 있습니까? (0) | 2020.03.19 |
| 포함 된 저장 프로 시저를 찾으려면 어떻게합니까 (0) | 2020.03.19 |