로컬 JSON 파일을 변수에 로드합니다.
jascript의 변수에 .json 파일을 로드하려고 하는데 작동하지 않습니다.사소한 오류일 뿐인데 찾을 수가 없어요.
다음과 같은 정적 데이터를 사용하면 모든 것이 정상적으로 작동합니다.
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 in variable.
var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "/content.json",
'dataType': "json",
'success': function(data) {
json = data;
}
});
return json;
})();
크롬 디버거로 실행했는데 항상 변수 값이json
이null
.그content.json
파일은, 그 파일을 호출하는 .disc 파일과 같은 디렉토리에 있습니다.
내가 뭘 놓쳤지?
여기서 답변한 바와 같이 저의 솔루션은 다음과 같습니다.
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 컴파일러 옵션을 에 추가할 수 있습니다.tsconfig.json
{
"compilerOptions": {
"target": "es5",
...
"resolveJsonModule": true,
...
},
...
}
오브젝트를 붙여넣은 경우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"
}
]
}
너도 여분을 가지고 있었어.}
.
필요 또는 fs가 없는 솔루션:
var json = []
fetch('./content.json').then(response => json = response.json())
내장된 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());
생각할 수 있는 문제는 다음 두 가지가 있습니다.
AJAX는 비동기이므로
json
외부 함수에서 돌아오면 정의되지 않습니다.파일이 로드되면 콜백 함수가 설정됩니다.json
하지만 그때는 아무도 신경 안써요이 문제를 해결하려고 노력하셨군요
'async': false
이 기능이 작동하는지 확인하려면 다음 행을 코드에 추가하고 브라우저 콘솔을 확인하십시오.console.log(['json', json]);
경로가 잘못되었을 수 있습니다.HTML 문서에서 스크립트를 로드할 때 사용한 경로와 동일한 경로를 사용합니다.그래서 대본이
js/script.js
,사용하다js/content.json
브라우저에 따라서는, 액세스를 시도한 URL 와 그 처리 방법을 표시할 수 있습니다(성공/오류 코드, HTML 헤더 등).브라우저의 개발 도구를 확인하여 어떤 일이 일어나는지 확인하십시오.
파일 ~/my-app/src/db/abc.json과 같이 지정된 json 형식의 경우:
[
{
"name":"Ankit",
"id":1
},
{
"name":"Aditi",
"id":2
},
{
"name":"Avani",
"id":3
}
]
~/my-app/src/app.disc와 같은 .disc 파일로 Import하려면 다음 절차를 수행합니다.
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
무료 JSON 파일을 사용하려면 https://jsonplaceholder.typicode.com/를 방문하십시오.
JSON 파일을 Import 하려면 , 다음의 순서에 따릅니다.
const dataframe1=require('./users.json');
console.log(dataframe1);
미래에서 답하라.
2022년 js json Import assertions api Import.
import myjson from "./myjson.json" assert { type: "json" };
console.log(myjson);
브라우저 지원: 2022년 9월까지는 크롬 기반 브라우저와 사파리만 지원되었습니다.
자세한 내용은 v8 Import Assertions 투고
특정 값을 output.json(질문에 공유된 json 포함) 파일에서 변수(VAR)로 내보내려면 다음 절차를 수행합니다.
export VAR=$(jq -r '.children.id' output.json)
언급URL : https://stackoverflow.com/questions/14484613/load-local-json-file-into-variable
'programing' 카테고리의 다른 글
GraphQL 스키마 명명 베스트 프랙티스는 무엇입니까? (0) | 2023.03.31 |
---|---|
IE11에서는 에러 약속의 취득이 정의되어 있지 않습니다. (0) | 2023.03.31 |
MongoDB 쉘에 20개 이상의 아이템(문서)을 인쇄하는 방법 (0) | 2023.03.31 |
프록시로부터의 HTTP 302 응답을 angularjs 단위로 처리합니다. (0) | 2023.03.31 |
성공적인 약속 해결에서 외부 변수에 값 할당 (0) | 2023.03.31 |