.json 파일에서 javascript를 읽으려면 어떻게 해야 하나요?
현재 스크립트는 다음과 같습니다.
<script type="text/javascript">
function updateMe(){
var x = 0;
var jsonstr = '{"date":"July 4th", "event":"Independence Day"}';
var activity=JSON.parse(jsonstr);
while(x<10){
date = document.getElementById("date"+x).innerHTML = activity.date;
event = document.getElementById("event"+x).innerHTML = activity.event;
x++;
}
}
</script>
여기서 date"x"와 event"x"는 일련의 html 태그입니다.이 기능은 페이지가 로드(온로드)될 때 실행됩니다.위의 하드코드가 아닌 로컬 .json 파일에서만 동일한 작업을 수행하는 것이 목표입니다.저는 이미 http://api.jquery.com/jQuery.getJSON/을 확인했습니다.
로컬 .json 파일은 다음과 같습니다.
{"date":"July 4th", "event":"Independence Day"}
좋은 의견이라도 있나?
.json file이라고 하면 "로컬 파일 시스템상의 파일"이라고 가정합니다.
jsonp 형식의 json 데이터를 저장하고file:// url액세스 할 수 있습니다.
HTML은 다음과 같습니다.
<script src="file://c:\\data\\activity.jsonp"></script>
<script type="text/javascript">
function updateMe(){
var x = 0;
var activity=jsonstr;
foreach (i in activity) {
date = document.getElementById(i.date).innerHTML = activity.date;
event = document.getElementById(i.event).innerHTML = activity.event;
}
}
</script>
파일 c:\data\activity.jsonp에는 다음 행이 포함되어 있습니다.
jsonstr = [ {"date":"July 4th", "event":"Independence Day"} ];
주의: 2018년 7월 12일 현재 기타 답변은 모두 구식입니다.JSONP는 현재 끔찍한 아이디어로 간주되고 있습니다.
JSON을 문자열로 지정하면JSON.parse()정상적으로 동작합니다.파일에서 json을 로드하고 있으므로 파일에 XMLHttpRequest를 실행해야 합니다.예를 들어 (이 예는 w3schools.com 입니다)
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();<!DOCTYPE html>
<html>
<body>
<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>
<p id="demo"></p>
<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>해당 파일이 여기에 없기 때문에 여기서 작동하지 않습니다.다만, 다음의 w3 의 예를 참조해 주세요.https://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax
다음은 JSON.parse()의 매뉴얼입니다.https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
요약은 다음과 같습니다.
JSON.parse() 메서드는 JSON 문자열을 해석하여 문자열로 기술된 JavaScript 값 또는 개체를 구성합니다.결과 오브젝트가 반환되기 전에 변환을 수행하기 위해 옵션 리바버 함수를 제공할 수 있습니다.
다음은 사용 예를 제시하겠습니다.
var json = '{"result":true, "count":42}';
obj = JSON.parse(json);
console.log(obj.count);
// expected output: 42
console.log(obj.result);
// expected output: true다음은 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest에서 XMLHttpRequests에 대한 요약입니다.
서버와 대화하려면 XMLHttpRequest(XHR) 개체를 사용합니다.전체 페이지를 새로 고칠 필요 없이 URL에서 데이터를 가져올 수 있습니다.이렇게 하면 웹 페이지는 사용자의 작업을 중단하지 않고 페이지의 일부만 업데이트할 수 있습니다.XMLHttpRequest는 Ajax 프로그래밍에서 많이 사용됩니다.
XMLHttpRequests를 사용하지 않는 경우 JQUERY 방법(이 방법이 왜 작동하지 않는지 잘 모르겠습니다)은 http://api.jquery.com/jQuery.getJSON/입니다.
동작하지 않기 때문에 XMLHttpRequests를 사용해 보겠습니다.
AJAX 요청을 시도할 수도 있습니다.
$.ajax({
'async': false,
'global': false,
'url': "/jsonfile.json",
'dataType': "json",
'success': function (data) {
// do stuff with data
}
});
문서: http://api.jquery.com/jquery.ajax/
이렇게 하면...json 파일의 올바른 경로를 지정하기만 하면 됩니다.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="abc.json"></script>
<script type="text/javascript" >
function load() {
var mydata = JSON.parse(data);
alert(mydata.length);
var div = document.getElementById('data');
for(var i = 0;i < mydata.length; i++)
{
div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
}
}
</script>
</head>
<body onload="load()">
<div id= "data">
</div>
</body>
</html>
데이터를 가져와 div에 추가하는 것만으로...처음에 경고로 길이를 인쇄합니다.
제 Json 파일입니다: abc.json
data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';
실제로는 URL 파라미터 값을 JSON 파일의 링크로 치환하여 JSON 값을 취득한다.AJAX CALL을 찾고 있습니다.
$.ajax({
url: "File.json", //the path of the file is replaced by File.json
dataType: "json",
success: function (response) {
console.log(response); //it will return the json array
}
});
데이터를 순수 JSON으로 저장하는 대신 JavaScript Object Literal로 저장합니다.
window.portalData = [
{
"kpi" : "NDAR",
"data": [15,152,2,45,0,2,0,16,88,0,174,0,30,63,0,0,0,0,448,4,0,139,1,7,12,0,211,37,182,154]
},
{
"kpi" : "NTI",
"data" : [195,299,31,32,438,12,0,6,136,31,71,5,40,40,96,46,4,49,106,127,43,366,23,36,7,34,196,105,30,77]
},
{
"kpi" : "BS",
"data" : [745,2129,1775,1089,517,720,2269,334,1436,517,3219,1167,2286,266,1813,509,1409,988,1511,972,730,2039,1067,1102,1270,1629,845,1292,1107,1800]
},
{
"kpi" : "SISS",
"data" : [75,547,260,430,397,91,0,0,217,105,563,136,352,286,244,166,287,319,877,230,100,437,108,326,145,749,0,92,191,469]
},
{
"kpi" : "MID",
"data" : [6,17,14,8,13,7,4,6,8,5,72,15,6,3,1,13,17,32,9,3,25,21,7,49,23,10,13,18,36,9,12]
}
];그런 다음 HTML에서 다음을 수행할 수 있습니다.
<script src="server_data.js"> </script>
function getServerData(kpiCode)
{
var elem = $(window.portalData).filter(function(idx){
return window.portalData[idx].kpi == kpiCode;
});
return elem[0].data;
};
var defData = getServerData('NDAR');
언급URL : https://stackoverflow.com/questions/6711002/how-can-i-get-javascript-to-read-from-a-json-file
'programing' 카테고리의 다른 글
| Jackson이 단일 JSON 개체를 하나의 요소가 있는 배열로 해석하도록 합니다. (0) | 2023.04.03 |
|---|---|
| jQuery에서 줄 바꿈이 포함된 JSON 형식의 텍스트를 검색할 때 문제가 발생함 (0) | 2023.04.03 |
| 모듈 빌드 실패:참조 오류: [BABEL] (0) | 2023.04.03 |
| oracle DATE와 TIMESTAMP의 차이점 (0) | 2023.04.03 |
| JSON 골랑 부울 생략 (0) | 2023.04.03 |