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

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"}]

2. 그리고 여기 내 코드, 즉 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());

3. 특정 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");
	  
});

4. 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");
	  
});

5. 그리고 유사한 이름 세부 정보를 읽으려면이 코드를 사용할 수 있습니다.

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");
	  
});

6. 파일의 모든 정보를 읽으려면 아래이 코드를 사용하십시오.

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);
});

브라우저에 따라 로컬 파일에 액세스 할 수 있습니다. 그러나 이것은 모든 앱 사용자에게 적용되지 않을 수 있습니다.

이렇게하려면 여기에서 지침을 시도해보십시오. http://www.html5rocks.com/en/tutorials/file/dndfiles/

파일이로드되면 다음을 사용하여 데이터를 검색 할 수 있습니다.

var jsonData = JSON.parse(theTextContentOfMyFile);

로컬 파일을 사용하는 경우 데이터를 js 객체로 패키징하는 것이 어떻습니까?

data.js

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

XMLHttpRequests , 구문 분석 없음 , MyData.resource직접 사용하십시오.

매우 간단합니다.
json 파일의 이름을 ".json"대신 ".js"로 바꾸십시오.

<script type="text/javascript" src="my_json.js"></script>

따라서 코드를 정상적으로 따르십시오.

<script type="text/javascript">
var obj = JSON.parse(contacts);

그러나 단지 정보를 위해 내 json 콘텐츠는 아래 코드와 같습니다.

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

ES6 모듈처럼 가져올 수 있습니다.

import data from "/Users/Documents/workspace/test.json"

$ .getJSON을 사용한 다음 $ .each를 사용하여 Key / value 쌍을 반복하십시오. JSON 파일 및 기능 코드의 컨텐츠 예제 :

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

XMLHttpRequest () 메소드를 사용할 수 있습니다.

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

console.log 문 (commented out)을 사용하여 myObj의 응답을 볼 수 있습니다.

AngularJS를 알고 있다면 $ http를 사용할 수 있습니다.

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

다른 폴더에 파일이 있으면 filename 대신 전체 경로를 언급하십시오.

웹 응용 프로그램이 있으므로 클라이언트와 서버가있을 수 있습니다.

브라우저 만 있고 브라우저에서 실행중인 javascript에서 로컬 파일을 읽으려면 클라이언트 만 있음을 의미합니다. 보안상의 이유로 브라우저는 이러한 작업을 수행하지 않아야합니다.

그러나 lauhub가 위에서 설명한 것처럼 이것은 작동하는 것 같습니다.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

다른 해결책은 시스템의 어딘가에 웹 서버 (리눅스에서는 Windows 또는 원숭이에서는 거의 없음)와 XMLHttpRequest 또는 D3 라이브러리를 사용하여 서버에서 파일을 요청하고 읽는 것입니다. 서버는 로컬 파일 시스템에서 파일을 가져와 웹을 통해 사용자에게 제공합니다.

Stano / Meetar가 위에서 언급 한 내용이 마음에 들었습니다. .json 파일을 읽는 데 사용합니다. Promise를 사용하여 예제를 확장했습니다. 여기에 동일한 플런저가 있습니다. https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

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("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

DRY를 위해 JSON 읽기를 다른 함수로 옮길 수 있습니다. 그러나 여기의 예는 약속을 사용하는 방법을 보여줍니다.

새 XMLHttpRequest 인스턴스를 작성하고 json 파일의 컨텐츠를로드해야합니다.

이 팁은 저에게 효과적입니다 ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript ) :

 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);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

간단한 해결 방법 중 하나는 JSON 파일을 로컬로 실행중인 서버에 넣는 것입니다. 이를 위해 터미널에서 프로젝트 폴더로 이동하여 포트 번호 (예 : 8181)에서 로컬 서버를 시작하십시오

python -m SimpleHTTPServer 8181

그런 다음 http : // localhost : 8181 /을하면 JSON을 포함한 모든 파일이 표시됩니다. 파이썬을 아직 설치하지 않았다면 설치하십시오.

로컬 웹 서버 ( Chris P 가 위에서 제안한대로)를 실행할 수 있고 jQuery를 사용할 수있는 경우 http://api.jquery.com/jQuery.getJSON/

data.json다음과 같이 D3을 사용하여 콜백을 처리하고 로컬 JSON 파일을로드 할 수 있습니다 .

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

나는 Stano의 훌륭한 답변을 받아 약속에 담았 습니다 . 파일 시스템에서 json 파일을로드하기 위해 대체 할 node 또는 webpack과 같은 옵션이없는 경우 유용 할 수 있습니다.

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

다음과 같이 호출 할 수 있습니다.

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

따라서 JSON 파일을 호스팅하기 위해 "Apache Tomcat"을 사용하려는 경우,

1> 서버를 시작한 후 다음 URL로 이동하여 Apache Tomcat이 시작되어 실행 중인지 확인하십시오. "localhost : 8080"-

2> 그런 다음 "webapps"폴더 - "C : \ Program Files \ Apache Software Foundation \ Tomcat 8.5 \ webapps"로 이동하십시오. 그리고 프로젝트 폴더를 만들거나 프로젝트 폴더를 복사하십시오.

3> json 파일을 거기에 붙여 넣습니다.

4> 그게 다야. 끝났습니다! - " http : // localhost : 8080 / $ project_name $ / $ jsonFile_name $ .json"으로 이동하십시오.