[javascript] 변수에 로컬 JSON 파일로드
.json 파일을 javascript의 변수에로드하려고하는데 작동하게 할 수 없습니다. 아마도 사소한 오류 일 수 있지만 찾을 수 없습니다.
다음과 같은 정적 데이터를 사용할 때 모든 것이 잘 작동합니다.
var json = {
id: "whatever",
name: "start",
children: [{
"id": "0.9685",
"name": " contents:queue"
}, {
"id": "0.79281",
"name": " contents:mqq_error"
}
}]
}
파일 {}
에있는 모든 것을 content.json
파일에 넣고 여기에 설명 된대로 로컬 JavaScript 변수에로드하려고했습니다. load json into variable .
var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "/content.json",
'dataType': "json",
'success': function(data) {
json = data;
}
});
return json;
})();
Chrome 디버거로 실행했는데 항상 변수의 값 json
이 null
. content.json
를 호출의 .js 파일과 같은 디렉토리에 파일이 상주.
내가 놓친 게 무엇입니까?
답변
개체를 content.json
직접 붙여 넣은 경우 잘못된 JSON입니다. 값이 숫자, 부울 또는 복합 (배열 또는 객체) 이 아닌 경우 JSON 키 및 값은 큰 따옴표 ( "
아님 '
)로 묶어야합니다 null
. JSON은 함수 나 undefined
값을 포함 할 수 없습니다 . 아래는 유효한 JSON으로 개체입니다.
{
"id": "whatever",
"name": "start",
"children": [
{
"id": "0.9685",
"name": " contents:queue"
},
{
"id": "0.79281",
"name": " contents:mqq_error"
}
]
}
당신은 또한 여분의 }
.
답변
여기 에 대답 한 내 솔루션 은 다음을 사용하는 것입니다.
var json = require('./data.json'); //with path
파일은 한 번만로드되며 추가 요청은 캐시를 사용합니다.
편집 캐싱을 피하기 위해 모듈을 사용하여 주석에 제공된 이 블로그 게시물 의 도우미 기능은 다음과fs
같습니다.
var readJson = (path, cb) => {
fs.readFile(require.resolve(path), (err, data) => {
if (err)
cb(err)
else
cb(null, JSON.parse(data))
})
}
답변
ES6 / ES2015의 경우 다음 과 같이 직접 가져올 수 있습니다 .
// example.json
{
"name": "testing"
}
// ES6/ES2015
// app.js
import * as data from './example.json';
const {name} = data;
console.log(name); // output 'testing'
Typescript를 사용하는 경우 다음과 같이 json 모듈을 선언 할 수 있습니다.
// tying.d.ts
declare module "*.json" {
const value: any;
export default value;
}
Typescript 2.9 이상부터 추가 할 수 있습니다 -resolveJsonModule compilerOptions intsconfig.json
{
"compilerOptions": {
"target": "es5",
...
"resolveJsonModule": true,
...
},
...
}
답변
두 가지 가능한 문제가 있습니다.
-
AJAX는 비동기식이므로
json
외부 함수에서 돌아 오면 정의되지 않습니다. 파일이로드되면 콜백 함수가json
어떤 값으로 설정 되지만 그 당시에는 아무도 신경 쓰지 않습니다.이 문제를
'async': false
. 이것이 작동하는지 확인하려면 다음 줄을 코드에 추가하고 브라우저의 콘솔을 확인하십시오.console.log(['json', json]);
-
경로가 잘못되었을 수 있습니다. HTML 문서에서 스크립트를로드하는 데 사용한 것과 동일한 경로를 사용하십시오. 따라서 스크립트가
js/script.js
이면js/content.json
일부 브라우저에서는 액세스를 시도한 URL과 액세스 방법 (성공 / 오류 코드, HTML 헤더 등)을 표시 할 수 있습니다. 브라우저의 개발 도구를 확인하여 어떤 일이 발생하는지 확인하십시오.
답변
내장 node.js 모듈 fs 는 필요에 따라 비동기식 또는 동기식으로 수행합니다.
다음을 사용하여로드 할 수 있습니다. var fs = require('fs');
비동기
fs.readFile('./content.json', (err, data) => {
if (err)
console.log(err);
else {
var json = JSON.parse(data);
//your code using json object
}
})
동기식
var json = JSON.parse(fs.readFileSync('./content.json').toString());
답변
~ / my-app / src / db / abc.json 파일에서와 같이 주어진 json 형식의 경우 :
[
{
"name":"Ankit",
"id":1
},
{
"name":"Aditi",
"id":2
},
{
"name":"Avani",
"id":3
}
]
~ / my-app / src / app.js와 같은 .js 파일로 가져 오려면 다음을 수행하십시오.
const json = require("./db/abc.json");
class Arena extends React.Component{
render(){
return(
json.map((user)=>
{
return(
<div>{user.name}</div>
)
}
)
}
);
}
}
export default Arena;
산출:
Ankit Aditi Avani