programing

로컬 JSON 파일을 변수에 로드합니다.

javamemo 2023. 3. 31. 21:21
반응형

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

크롬 디버거로 실행했는데 항상 변수 값이jsonnull.그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.jsonJSON은 직접 유효하지 않습니다.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());

생각할 수 있는 문제는 다음 두 가지가 있습니다.

  1. AJAX는 비동기이므로json외부 함수에서 돌아오면 정의되지 않습니다.파일이 로드되면 콜백 함수가 설정됩니다.json하지만 그때는 아무도 신경 안써요

    이 문제를 해결하려고 노력하셨군요'async': false이 기능이 작동하는지 확인하려면 다음 행을 코드에 추가하고 브라우저 콘솔을 확인하십시오.

    console.log(['json', json]);
    
  2. 경로가 잘못되었을 수 있습니다.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

반응형