JavaScript에서 외부 로컬 JSON 파일을 읽는 방법은 무엇입니까?
JSON 파일을 읽고 데이터를 출력하기 위해 JSON 파일을 로컬 시스템에 저장하고 JavaScript 파일을 만들었습니다.다음은 JSON 파일입니다.
{"resource":"A","literals":["B","C","D"]}
입니다.JSON 파일의 경로는 다음과 같습니다./Users/Documents/workspace/test.json.
JSON 파일을 읽고 JavaScript로 데이터를 인쇄하기 위한 간단한 코드 작성을 도와주시겠습니까?
javascript를 사용하여 외부 로컬 JSON 파일(data.json)을 읽으려면 먼저 data.json 파일을 만듭니다.
data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
그리고나서,
javascript 파일과 함께 스크립트 소스의 json 파일 경로를 언급합니다.
<script type="text/javascript" src="data.json"></script> <script type="text/javascript" src="javascript.js"></script>json 파일에서 개체 가져오기
var mydata = JSON.parse(data); alert(mydata[0].name); alert(mydata[0].age); alert(mydata[1].name); alert(mydata[1].age);
하드 디스크에서 파일을 로드하는 것은 비동기 작업이기 때문에 파일을 로드한 후에 실행할 콜백 함수를 지정해야 합니다.
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);
});
할 수 있습니다..html ★★★★★★★★★★★★★★★★★」.txt를 ""로 MIME을 ""로 변경합니다."text/html","text/plain"syslog.
요청은 HTTP를 사용하여 이루어지기 때문에 로컬리소스에 AJAX 콜을 발신할 수 없습니다.
회피책은 로컬 웹 서버를 실행하여 파일을 제공하고 로컬호스트에 AJAX 콜을 발신하는 것입니다.
읽기 이 된다는 점에서는 JSON의 .jQuery.getJSON():
http://api.jquery.com/jQuery.getJSON/
Node.js에서 또는 브라우저에서 require.js를 사용하는 경우 간단히 다음을 수행할 수 있습니다.
let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');
주의: 파일이 로드되면 이후 콜은 캐시를 사용합니다.
Fetch API를 사용하는 것이 가장 쉬운 해결책입니다.
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Firefox에서는 완벽하게 작동하지만 Chrome에서는 보안 설정을 커스터마이즈해야 합니다.
- 먼저 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"}]- 「」, 「node.js」는, 다음의 점에 해 주세요.
'utf8'합니다.readFileSynca가 : :인인인 : : : : : : : : : : : : : : : : :.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());- 특정 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");
});- 에 url로 한
localhost:3030/get/33도 있고 요.이치노에는 이 수 모든 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");
});- 또, 유저명의 상세를 읽고 싶은 경우는, 이 코드를 사용할 수 있습니다.
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");
});- 파일의 모든 정보를 읽으려면 아래 코드를 사용하십시오.
app.get('/all',sendAll);
function sendAll(request,response){
response.send(words);
}
It like ES6 모듈을 Import할 수 있습니다.
import data from "/Users/Documents/workspace/test.json"
이전에 많은 사람들이 언급했듯이, 이것은 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);
});
아주 간단합니다.
의 이름을 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"}]';
브라우저에 따라서는 로컬파일에 액세스 할 수 있습니다.그러나 모든 앱 사용자가 이 방법을 사용할 수 있는 것은 아닙니다.
이 조작을 실시하려면 , 다음의 URL 로부터 순서를 시험해 주세요.
파일이 로드되면 다음을 사용하여 데이터를 검색할 수 있습니다.
var jsonData = JSON.parse(theTextContentOfMyFile);
로컬 파일을 사용하는 경우 데이터를 js 개체로 패키징하는 것이 어떻습니까?
data.displaces
MyData = { resource:"A",literals:["B","C","D"]}
XMLHttpRequests도 해석도 하지 않고 사용만 합니다.MyData.resource
2021년 솔루션(Chrome 91+에서 작동)
JSON 파일을 Import하는 JS 파일은 모듈이어야 합니다.
<script type="module" src="script.js"></script>
그럼 안으로script.jsjson 삭제:
import data from "./data.json" assert { type: "json" };
할 수 .console.log(data)
$.getJ를 사용하세요.SON을 누른 다음 $.를 눌러 키/값 쌍을 반복합니다.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)
}
})
});
위의 모든 솔루션은 로컬호스트에서 로컬 웹 서버가 실행되고 있는 경우에만 기능합니다.웹 서버를 사용하지 않고 이를 수행하려면 파일 업로드 제어를 사용하여 JSON 파일을 업로드하여 수동으로 작업을 수행해야 할 수 있습니다.보안 위험을 위해 브라우저는 로컬서버 이외에서는 이 기능을 제공하지 않습니다.
로컬 웹 서버를 사용하지 않고 업로드한 파일을 해석할 수도 있습니다.다음은 솔루션과 유사한 문제를 해결한 샘플 코드입니다.
<div id="content">
<input type="file" name="inputfile" id="inputfile">
<br>
<h2>
<pre id="output"></pre>
</h2>
</div>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function () {
let fileReader = new FileReader();
fileReader.onload = function () {
let parsedJSON = JSON.parse(fileReader.result);
console.log(parsedJSON);
// your code to consume the json
}
fileReader.readAsText(this.files[0]);
})
</script>
제 경우 로컬 JSON 파일을 읽고 바탕화면에 html 파일로 표시하기만 하면 됩니다.
주의: JavaScript를 사용하여 파일 업로드를 자동화하려고 시도하지 마십시오. 브라우저에 의해 부과된 동일한 보안 제한 때문에 이 작업도 허용되지 않습니다.
비동기 wait를 사용하여 fetch()를 사용하여 이 작업을 수행할 수 있습니다.이것은 url에서 데이터를 가져오는 가장 안전하고 최신 방법입니다.
const url = "../asset/videoData.json";
const fetchJson = async () => {
try {
const data = await fetch(url);
const response = await data.json();
} catch (error) {
console.log(error);
}
};
외부 URL에서 데이터를 가져오는 경우에도 사용할 수 있습니다.
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 문(commentout)을 사용하면 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;
};
}
파일이 다른 폴더에 있는 경우 파일 이름 대신 전체 경로를 지정하십시오.
웹 응용 프로그램이 있으므로 클라이언트와 서버가 있을 수 있습니다.
브라우저만 있고 브라우저에서 실행 중인 javascript에서 로컬 파일을 읽으려면 클라이언트만 있어야 합니다.보안상의 이유로 브라우저에서는 이러한 작업을 수행할 수 없습니다.
단, 위의 lauhub에서 설명한 바와 같이 이것은 기능하는 것 같습니다.
http://www.html5rocks.com/en/tutorials/file/dndfiles/
또 다른 해결책은 컴퓨터 어딘가에 웹 서버(Windows의 경우 tiny 또는 Linux의 경우 monkey)를 설정하고 XMLHttpRequest 또는 D3 라이브러리를 사용하여 서버에서 파일을 요청하여 읽는 것입니다.서버는 로컬 파일 시스템에서 파일을 가져와 웹을 통해 사용자에게 제공합니다.
위의 Chris P가 제안한 바와 같이 로컬 웹 서버를 실행할 수 있고 jQuery를 사용할 수 있다면 http://api.jquery.com/jQuery.getJSON/를 사용해 보십시오.
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);
});
JSON의 판독치는 DRY의 다른 기능으로 이동할 수 있지만, 이 예에서는 약속 사용 방법을 보여 줍니다.
d3.js를 사용하여 JSON 파일을 가져올 수 있습니다.html body에서 d3를 호출하기만 하면 됩니다.
<script src="https://d3js.org/d3.v5.min.js"></script>
다음으로 js 스크립트에 다음과 같이 입력합니다.
d3.json("test.json").then(function(data_json) {
//do your stuff
})
새 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을 포함한 모든 파일이 표시됩니다.python이 아직 설치되어 있지 않다면 python을 설치해야 합니다.
「」를 사용합니다.jQuery ★★★★★★★★★★★★★★★★★」ajax 읽힌다JSON and (데이터를 하여 조작합니다)
$(document).ready(function () {
$.ajax({
url: 'country.json',
type: 'GET',
dataType: 'json',
success: function (code, statut) {
for (let i in code) {
console.log(i)
}
}
});
});
위의 모든 것이 너무 복잡해 보여서 다른 방법을 제공하고자 했을 뿐입니다.Chrome 버전 95.0.4638.54에서 작동합니다.
빠르고 더러운 js 코드만
//read json document and remove the new line
var object = JSON.stringify(document.activeElement.textContent.replaceAll('\n',''));
//parse the string to json... don't know why but oje json.parse is not enough..
var json = JSON.parse(JSON.parse(object));
//read your json
json.items[0].contactInfo.firstName
//enjoy테스트 json:
{
"items": [
{
"type": "test1",
"id": "test1",
"name": "test1",
"entityId": "test1",
"active": true,
"contactInfo": {
"company": "test1",
"firstName": "test1",
"email": "test1"
}
},
{
"type": "test2",
"id": "test2",
"name": "test2",
"entityId": "test2",
"active": true,
"contactInfo": {
"company": "test2",
"firstName": "test2",
"email": "test2"
}
}
]
}
JSON 파일을 .js 파일로 변환하고 변수 또는 const에 json을 할당한 후 메인 javascript 파일에서 참조합니다.
파일 D3을 할 수 .data.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>
나는 스타노의 훌륭한 대답을 받아들여 그것을 약속으로 포장했다.이는 파일 시스템에서 json 파일을 로드하기 위해 폴백할 노드나 웹 팩과 같은 옵션이 없는 경우 유용합니다.
// 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 파일을 로드하고 싶어한다는 것을 알 수 있었습니다.경우에 따라서는 가즈리온과 경우에 따라서는 "json 파일의 디렉토리"가 있습니다(그렇지 않으면 먼저 목록을 생성해야만 각 파일을 다운로드할 수 있습니다).이게 프로젝트 전체에 걸리면 일이 엉망이 돼요.또한 json 파일의 데이터 간에 관계가 많으면 번거로울 수 있습니다.
이러한 모든 작업은 위의 방법으로 수행할 수 있으며 .js 파일을 만들거나 로컬 가져오기를 통해 가져올 수 있습니다.
그러나 다른 방법(계층 포함 서버 측 솔루션을 원하지 않는 경우)은 먼저 모든 데이터를 SQL Lite 데이터베이스에 로드하는 것입니다.이렇게 하면 더 많은 데이터를 쉽게 관리할 수 있으며, 모든 데이터가 포함된 파일은 1개뿐입니다.
그런 다음 웹 어셈블리를 사용하여 SQLite 데이터베이스를 로드한 다음 일반 쿼리를 사용하여 데이터 클라이언트 측에 쿼리를 수행할 수 있습니다.이 모든 것을 클라이언트 측에서 실행할 수 있습니다.
예를 들어 https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts(클라이언트 측 솔루션에 컴파일되는 스크립트파일)의 예를 나타냅니다.
읽기/쓰기 사이트에서는 캐시하는 사용자별로 sqlite 데이터베이스를 전달하여 데이터가 사용자별로 고유하도록 할 수 있습니다.
참조: https://github.com/sql-js/sql.js
언급URL : https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript
'programing' 카테고리의 다른 글
| 소스에서 PHP를 설치할 때 xml2-config not found 오류를 수정하는 방법 (0) | 2022.12.24 |
|---|---|
| 페이지에서 Nuxtjs 비동기 기능이 페이지 새로 고침 시 작동하지 않음 (0) | 2022.12.24 |
| scanf()는 버퍼에 줄바꿈 문자를 남깁니다. (0) | 2022.12.24 |
| 기본 제공 DOM 메서드 또는 프로토타입을 사용하여 HTML 문자열에서 새 DOM 요소 만들기 (0) | 2022.12.24 |
| JavaScript에서 setAttribute vs .timeout=을 사용해야 하는 시기는 언제입니까? (0) | 2022.12.24 |