[javascript] JavaScript에서 외부 로컬 JSON 파일을 읽는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

JSON 파일을 로컬 시스템에 저장하고 JSON 파일을 읽고 데이터를 인쇄하기 위해 JavaScript 파일을 만들었습니다. JSON 파일은 다음과 같습니다.

{"resource":"A","literals":["B","C","D"]}

이것이 JSON 파일의 경로라고 가정 해 봅시다 /Users/Documents/workspace/test.json.

JSON 파일을 읽고 JavaScript로 데이터를 인쇄하는 간단한 코드를 작성하는 데 도움을 줄 수 있습니까?

답변

당신은 할 수없는 요청이 HTTP를 사용하여 만들어 같은 로컬 리소스에 AJAX 호출을합니다.

해결 방법은 로컬 웹 서버를 실행하고 파일을 제공하고 localhost를 AJAX 호출하는 것입니다.

JSON을 읽는 코드를 작성하는 데 도움이되는 관점에서 다음 문서를 읽어야합니다 jQuery.getJSON().

http://api.jquery.com/jQuery.getJSON/

답변

javascript를 사용하여 외부 로컬 JSON 파일 (data.json)을 읽으려면 먼저 data.json 파일을 작성하십시오.

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

  1. 자바 스크립트 파일과 함께 스크립트 소스에서 json 파일의 경로를 언급하십시오.

    <script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>

  2. json 파일에서 객체 가져 오기

    var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);

자세한 정보는 이 참조를 참조 하십시오 .

답변

.json하드 디스크 에서 파일 을 로드 하는 작업은 비동기 작업이므로 파일을로드 한 후 실행할 콜백 함수를 지정해야합니다.

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

이 함수 는 mime type 매개 변수를 재정 의하여 .html또는 .txt파일 을로드 할 때도 작동 합니다."text/html" , "text/plain"등

답변

때 Node.js를 또는 브라우저에서 require.js를 사용하는 경우 , 당신은 간단하게 할 수 있습니다 :

let json = require('/Users/Documents/workspace/test.json');

참고 : 파일이 한 번로드되면 후속 호출에서 캐시를 사용합니다.

답변

  1. 먼저 json 파일을 작성하십시오. 이 예에서 내 파일은 words.json입니다.
[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]

스 니펫 확장
  1. 그리고 여기 내 코드, 즉 node.js가 있습니다. 'utf8'인수에 유의하십시오 readFileSync: 이것은 Buffer( JSON.parse처리 할 수는 있지만) 문자열이 아니라 반환 합니다. 결과를 볼 수있는 서버를 만들고 있습니다 …
var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');

var app=express();

var server=app.listen(3030,listening);

function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());

스 니펫 확장
  1. 특정 ID 세부 정보를 읽으려면 코드를 다음과 같이 언급 할 수 있습니다.
 app.get('/get/:id',function(req,res){

var i;

 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.id){
 res.send(words[i]);
 }
}
console.log("success");

});

스 니펫 확장
  1. URL에 입력하면 localhost:3030/get/33해당 ID와 관련된 세부 정보가 제공됩니다 …. 이름으로도 읽습니다. 내 json 파일에는이 코드가있는 비슷한 이름이 있습니다. 하나의 이름 세부 정보를 얻을 수 있습니다 …. 그리고 모든 유사한 이름을 인쇄하지 않았습니다
 app.get('/get/:name',function(req,res){

var i;

 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.name){
 res.send(words[i]);
 }
}
console.log("success");

});

스 니펫 확장
  1. 그리고 유사한 이름 세부 정보를 읽으려면이 코드를 사용할 수 있습니다.
app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(word);

 console.log("success");

});

스 니펫 확장
  1. 파일의 모든 정보를 읽으려면 아래이 코드를 사용하십시오.
app.get('/all',sendAll);

 function sendAll(request,response){
 response.send(words);

 }

스 니펫 확장

답변

Fetch API를 사용하는 것이 가장 쉬운 솔루션입니다.

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

Firefox에서는 완벽하게 작동하지만 Chrome에서는 보안 설정을 사용자 정의해야합니다.

답변

많은 사람들이 이전에 언급했듯이 AJAX 호출을 사용하면 작동하지 않습니다. 그러나 그 주위에 방법이 있습니다. 입력 요소를 사용하여 파일을 선택할 수 있습니다.

선택한 파일 (.json)은 다음 구조를 가져야합니다.

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

그런 다음 FileReader ()와 함께 JS를 사용하여 파일을 읽을 수 있습니다.

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});