로컬 JSON 파일로드

322

로컬 JSON 파일을로드하려고하는데 작동하지 않습니다. 다음은 jQuery를 사용하는 JavaScript 코드입니다.

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

test.json 파일 :

{"a" : "b", "c" : "d"}

아무것도 표시되지 않으며 Firebug는 데이터가 정의되지 않았다고 알려줍니다. Firebug에서 볼 수 json.responseText있고 훌륭하고 유효하지만 줄을 복사하면 이상합니다.

 var data = eval("(" +json.responseText + ")");

Firebug의 콘솔에서 작동하며 데이터에 액세스 할 수 있습니다.

누구든지 해결책이 있습니까?

javascript  jquery  json  firebug  local-files 
— 패트릭 브라운
소스
JSON문자열 을 반환하면 이미 자바 스크립트 객체를 검색하는 중이므로 사용할 필요가 없습니다 eval().
— yoda
1
"로컬"json 파일은 무엇입니까? 브라우저 나 서버에서 로컬?
— seppo0010
2
세부 정보가 충분하지 않습니다. 파일 test.json은 경로를 지정하지 않으므로 액세스하는 페이지의 위치와 관련된 상대 URI입니다. 따라서 @ seppo0010은 페이지가 어딘가에 원격 서버에 있으면 서버에 로컬이며 페이지가 file://프로토콜에 의해 액세스되는 로컬 파일 시스템에 있으면 컴퓨터와 관련이 있다고 말합니다 .
— hippietrail

답변:

292

$.getJSON 비동기식이므로 다음을 수행해야합니다.

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
— seppo0010
소스
47
로컬 파일에 실제로 액세스 할 수 있습니까?
— maasha
3
아니요, 파일 일 수는 없지만 웹 서버에서 제공해야합니다.
— Kris Erickson
15
절대적으로 맞습니다. Chrome 보안은 Firefox 나 다른 것보다 훨씬 더 엄격합니다. xhr, Josn, Xml 등을 사용하여로드하는 것은 하나 또는 두 가지를 제외하고 Chrome에서 거의 모두 잠겨 있습니다.
— shawty
1
나는 이것을 시도했지만 운이 없다. 콘솔에도 오류가 없습니다 :(
— Govind Kailas
11
myjson.com 을 사용 하여 로컬 파일을 업로드하고 크롬 브라우저에서 액세스하는 것이 좋습니다 .
— 화학 프로그래머
167

angularjs 앱을 테스트하기 위해 동일한 요구가 있었고 내가 찾은 유일한 방법은 require.js를 사용하는 것입니다.

var json = require('./data.json'); //(with path)

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

nodejs로 파일을 읽는 방법에 대한 자세한 내용 : http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js : http://requirejs.org/

— 아프
소스
4
jest 로이 작업을 수행하는 경우 수행해야합니다. jest.dontMock('./data.json');그렇지 않으면 결과가 비어 있습니다. 누군가가 유용 할 수도 있습니다 :)
— Håvard Geithus
1
이 코드의 맥락은 무엇입니까? 당신은 무엇을 json합니까?
— Drazen Bjelovuk
4
친절하게 전체 예를 제공하십시오 : 오류가 발생합니다 :has not been loaded yet for context: _. Use require([])
— shaijut
2
require는 node.js 모듈이기 때문에 브라우저에서 작동하지 않습니다. OP가 브라우저에 그것을로드하려면 fetch를 사용해야합니다.
— sniffingdoggo
1
예, require는 노드 용이지만 requireJS는 브라우저에서도 사용할 수 있습니다. "RequireJS는 JavaScript 파일 및 모듈 로더입니다. 브라우저 사용에 최적화되어 있지만 Rhino 및 Node와 같은 다른 JavaScript 환경에서는 사용할 수 있습니다. "
— 퀘스트 당 Aronsson
96

보다 현대적인 방식으로 Fetch API를 사용할 수 있습니다 .

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

모든 최신 브라우저는 Fetch API를 지원합니다. (Internet Explorer는 그렇지 않지만 Edge는 그렇지 않습니다!)

출처:

— codidact.com으로 이동하는 aloisdg
소스
1
Fetch API를 사용할 때 보안 설정을 비활성화하지 않는 한 여전히 로컬 파일에 액세스하는 것이 금지되어 있습니까?
— LarsH
3
@LarsH 분명히 그렇습니다. 오늘 아침에 시도했지만 가져 오기 API가 file : // 체계를 가진 로컬 json 파일을 읽을 수 없습니다. 이 방법은 매우
— 깔끔해 보이지만
1
@ keysl 좋아, 아마도 보안상의 이유로 그렇게해야 할 것 같습니다. (그리고 당신은 옳다, 나는 " file://체계 를 통해 파일에 접근하는 것을 금지했다"는 것을 의미했다 . 그러나 그것은 훌륭한 접근 방법이다. 나는이 답변 덕분에 그것을 사용하기 시작했다.
— LarsH
fetch API를 사용하여 로컬 파일에 액세스 할 수 없습니다
— anton zlydenko
89

사용자가 파일 시스템의 어느 곳에서나 로컬 json 파일을 선택하게하려면 다음 솔루션이 작동합니다.

FileReader 및 JSON.parser를 사용하며 jquery는 사용하지 않습니다.

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

다음은 FileReader에 대한 좋은 소개입니다. http://www.html5rocks.com/en/tutorials/file/dndfiles/

— 트라우스 티 크리스티안 손
소스
4
FileReader API는 IE 8 또는 9에서 지원되지 않지만 다른 모든 브라우저는 정상입니다. caniuse.com/#search=filereader
— northben
Chrome에서 완벽하게 작동합니다.newArr
— Belter
이 답변은 jQuery를 사용하지 않기 때문에 훌륭하고 약간 다릅니다.
— DigitalDesignDj
78

빠르고 더러운 것을 찾고 있다면 HTML 문서의 헤드에 데이터를로드하십시오.

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

<html>
<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>
...
</html>

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

Chrome의 힙 크기는 약 4GB이므로 데이터가 더 큰 경우 다른 방법을 찾아야합니다. 다른 브라우저를 확인하려면 다음을 시도하십시오.

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
— wer 르
소스
당신은 AMD가 효과가 있다고 생각하지만 AMD가 여기에 올바른 솔루션이라고 생각하지 않습니다. 가장 간단한 방법은 $ .getJSON을 사용하는 것입니다. 감사합니다
— Patrick Browne
7
@PatrickBrowne 예, getJSON은 좋은 솔루션이지만 많은 경우 크로스 도메인 문제 (예 : S3에서 데이터로드)가 발생한다고 생각합니다.
— jwerre 2016 년
나는 이것이 가장 간단한 해결책이라는 것을 알았습니다. JSON 파일은 거의 동일하게 보이므로 추가 혼란이 없습니다 (파일 맨 위에 "var xyz ="만 있음). 아무도 그들의 코드에 큰 데이터 파일을 원하지 않습니다.
— cslotty
이것은 많은 수준에서 잘못되었습니다. 나는 투표가 얼마나 많은지를 이해하지 못합니다. 여기 누군가가 codepen.io/KryptoniteDove/post / ... 를보고 싶다면 더 설명합니다 . 실제로는 실제로 JSON 문서를로드하는 것이 아니라 Javascript 객체를 생성하는 것입니다.이 기술은 실제 JSON 파일에는 작동하지 않습니다. "
— lesolorzanov
1
솔직히 이것은 미리 준비된 데이터가 있고 정적 페이지를 제공하려는 경우 훌륭한 솔루션입니다.
— Evan Pu
19

ES5 버전

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

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

ES6 버전

const loadJSON = (callback) => {
    let 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 = () => {
        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);
}

const init = () => {
    loadJSON((response) => {
        // Parse JSON string into object
        let actual_JSON = JSON.parse(response);
    });
}
스 니펫 확장

— xgqfrms
소스
Tomcat 또는 Xampp 또는 Jboss와 같은 로컬 응용 프로그램 서버를 사용하는 경우 @Pier 대본 작업
— Mirko Cianfarani
@MirkoCianfarani는 실제로 file:///프로토콜을 사용 하지 않고 파일이 더 이상 로컬로 간주 될 수 없기 때문에.
— 부두
@xgqfrms Fetch API는 대단합니다!
— xgqfrms
2
//xobj.status는 정수입니다. xobj.status === "200"은 xobj.status === 200이어야합니다.
— yausername
@ yausername 맞습니다. 해당 오류 상태 유형으로 죄송합니다. 수정되었습니다.
— xgqfrms 2014
14

Original Poster의 실제 코드 문제를 이해하거나 해결하지 않고이 질문에 몇 번이나 대답했는지 믿을 수 없습니다. 즉, 나는 초보자입니다 (2 개월의 코딩 만). 내 코드는 완벽하게 작동하지만 변경 사항을 자유롭게 제안하십시오. 해결책은 다음과 같습니다. 

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

위에서 제공 한 것과 동일한 코드를 작성하는 더 짧은 방법은 다음과 같습니다.

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

$ .getJSON 대신 $ .ajax를 사용하여 동일한 방식으로 코드를 작성할 수도 있습니다.

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

마지막 으로이 작업을 수행하는 마지막 방법 은 $ .ajax를 함수로 묶는 것입니다. 나는 이것을 인정 할 수는 없지만 조금 수정했다. 나는 그것을 테스트하고 작동하며 위의 코드와 동일한 결과를 생성합니다. 이 솔루션을 여기에서 찾았습니다-> 변수에 json로드

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

test.json의 위 내 코드에서 볼 파일 내 서버에서 호스팅 그는 (원본 포스터)에 게시 한 것과 같은 JSON 데이터 객체를 포함합니다.

{
    "a" : "b",
    "c" : "d"
}
— 숟가락 혼다
소스
11

es6에서 가져 오기가 언급되지 않은 것에 놀랐습니다 (작은 파일과 함께 사용)

전의: import test from './test.json'

2 웹팩 <를 사용하여 json-loader기본적으로.json 파일의 합니다.

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

대한 타이프 라이터 :

import test from 'json-loader!./test.json';

TS2307 (TS) 'json-loader! ./ suburbs.json'모듈을 찾을 수 없습니다

제대로 작동하려면 먼저 모듈을 선언해야했습니다. 이것이 누군가를 위해 몇 시간을 절약하기를 바랍니다.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

내가 생략하려고 경우 loader에서 json-loader나는 다음과 같은 오류에서 가져온 webpack:

BREAKING CHANGE : 로더 사용시 더 이상 '로더'접미사를 생략 할 수 없습니다. 'json'대신 'json-loader'를 지정해야합니다. https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed를 참조 하십시오.

— 오 글라스
소스
1
쉽고 간단합니다.
— Our_Benefactors
웹 페이지가 파일 protocol로로드 된 경우 es6 import 문을 사용할 수 없습니다.
— Onno van der Zee
6

시도는 그런 식입니다 (그러나 JavaScript는 클라이언트 파일 시스템에 액세스 할 수 없습니다).

$.getJSON('test.json', function(data) {
  console.log(data);
});
— 사 미치
소스
4

로컬 json 파일을로드하려고 시도 할 때이 스레드를 찾았습니다. 이 솔루션은 나를 위해 일했습니다 ...

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

... 그리고 이렇게 사용됩니다 ...

load_json("test2.html.js")

... 그리고 이것은 <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
— TechSpud
소스
2
이것은 매우 재사용 가능한 것처럼 보이지 않습니다. 예를 들어, json 파일이 원격 서버에서 제공되는 경우 100ms 제한 시간이 충분하지 않을 수 있습니다. 시간은 클라이언트의 연결 속도에 따라 다르므로 연결 속도가 느린 클라이언트에 대해서는 시간 초과를 매우 길게 설정해야합니다. 즉, setTimeout을 사용하여 리소스로드를 대기해서는 안됩니다.
— Kenny806
1
Kenny806-호스트되지 않은 웹 페이지의 경우 로컬 리소스를로드하는 특정 문제를 해결하기 때문에 재사용이 쉽지 않습니다. 웹 호스팅 페이지를위한 1000 가지의 리소스 로딩 솔루션이 있습니다. 이것은 아니다 그것의, 솔루션 솔루션입니다. 시간 초과를 변경하는 것은 정말 간단합니다. 시간 초과를 제거함으로써 무한 대기가 허용되는 것을 제안합니까?
— TechSpud
2
무한 대기를 제안하는 것이 아니라 파일로드가 완료되는 즉시 파일로드에 반응 할 수있는 기술을 사용하는 것이 좋습니다. 시간 초과의 내 문제는 항상 완료 될 때까지 기다려야한다는 것입니다. 파일이 10ms 내에로드 되더라도 여전히 100ms를 기다립니다. 예, 시간 초과 조정은 쉽지만 다른 파일을로드 할 때마다 또는 파일 크기가 변경 될 때마다 (대기 시간을 최적화하기 위해) 코드를 변경하는 것이 좋습니다. 이러한 해결책은 IMHO 잘못이며 앞으로 다른 사람이 사용하려고 할 때 많은 두통을 유발할 수 있습니다.
— Kenny806
이 스크립트를 사용하는 사람은 누구나 자신의 스크립트를위한 기초로 사용해야합니다 . 이 스크립트가 잘못된 지 여부에 대한 귀하의 의견이 있습니다. 대체 솔루션을 제안하지 않겠습니까? 이것은 모든 유스 케이스에서 작동하지 않을 것입니다. 로컬 HTML 페이지에서 로컬 파일을로드하여 나를 위해 일했습니다. 나는이 질문에 대한 해결책을 다른 사람에게 도움이되기를 바랍니다. 로컬 리소스를로드하려고합니까? 로드하는 파일을 기반으로 타임 아웃 값을 변수로 전달하지 않겠습니까? 로컬 파일의 Ajax는 꽤 제한적입니다.
— TechSpud
1
onreadystatechange 또는 onload를 사용하고 기능을 제공하는 것이 좋습니다. script.onload = 함수 이름;
— Shane Best
4

TypeScript에서는 import를 사용하여 로컬 JSON 파일을로드 할 수 있습니다. 예를 들어 font.json로드

import * as fontJson from '../../public/fonts/font_name.json';

tsconfig 플래그 --resolveJsonModule이 필요합니다.

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

자세한 내용은 typescript의 릴리스 노트를 참조하십시오. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

— 폰테
소스
대답이 명확하게 이해되지 않기 때문에 자세한 내용을 쓸 수 있습니다.
— Bay
3

각도 (또는 다른 프레임 워크)에서 http를 사용하여로드 할 수 있습니다.

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

도움이 되었기를 바랍니다.

— 라 지키 란
소스
3

내가 한 것은 JSON 파일을 약간 편집하는 것이 었습니다.

myfile.json => myfile.js

JSON 파일에서 (JS 변수로 만듭니다)

{name: "Whatever"} => var x = {name: "Whatever"}

결국

export default x;

그때,

import JsonObj from './myfile.js';

— 수푼 카 빈다
소스
3

질문에 대한 예제 (test.json)에 표시된 것처럼 JSON에 로컬 배열을 사용하는 경우 parseJSON()JQuery 의 방법입니다.

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() 원격 사이트에서 JSON을 가져 오는 데 사용됩니다-로컬 HTTP 서버를 사용하지 않는 한 로컬에서 작동하지 않습니다.

— 목사관
소스
2 
$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });


             }
  });
— 카르 한 비제이
소스
1

내가 사용하는 접근법은 json을 객체 리터럴로 패딩 / 랩핑 한 다음 파일 확장자를 .jsonp로 저장하는 것입니다. 이 방법은 대신 새 jsonp 파일 (test.jsonp)로 작업 할 것이므로 원래 json 파일 (test.json)도 변경되지 않은 상태로 둡니다. 랩퍼의 이름은 무엇이든 가능하지만 jsonp를 처리하는 데 사용하는 콜백 함수와 동일한 이름이어야합니다. 예를 들어 test.json을 사용하여 'test.jsonp'파일의 jsonp 래퍼 추가를 보여줍니다.

json_callback({"a" : "b", "c" : "d"});

그런 다음 스크립트에서 전역 범위로 재사용 가능한 변수를 작성하여 리턴 된 JSON을 보유하십시오. 그러면 콜백 함수 대신 스크립트의 다른 모든 함수에서 반환 된 JSON 데이터를 사용할 수 있습니다.

var myJSON;

다음은 스크립트 삽입으로 json을 검색하는 간단한 함수입니다. IE는 jQuery .append 메소드를 지원하지 않으므로 여기서 jQuery를 사용하여 스크립트를 문서 헤드에 추가 할 수 없습니다. 아래 코드에서 주석 처리 된 jQuery 메소드는 .append 메소드를 지원하는 다른 브라우저에서 작동합니다. 차이점을 보여주기 위해 참조로 포함됩니다.

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

다음은 json 결과 데이터를 전역 변수로 가져 오는 짧고 간단한 콜백 함수 (jsonp 래퍼와 동일한 이름)입니다.

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

도트 표기법을 사용하여 스크립트의 모든 기능으로 json 데이터에 액세스 할 수 있습니다. 예로서:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

이 방법은 사용하는 방법과 약간 다를 수 있지만 많은 장점이 있습니다. 먼저 동일한 jsonp 파일을 동일한 기능을 사용하여 로컬 또는 서버에서로드 할 수 있습니다. 보너스로 jsonp는 이미 도메인 간 친화적 형식이며 REST 유형 API와 함께 쉽게 사용할 수 있습니다.

물론 오류 처리 기능은 없지만 왜 필요한가? 이 방법으로 json 데이터를 얻을 수 없다면 json 자체에 문제가 있다고 생각할 수 있습니다. 좋은 JSON 유효성 검사기에서 확인하십시오.

— 출현
소스
1

자바 스크립트 파일에 json을 넣을 수 있습니다. 이것은 jQuery의 getScript()기능을 사용하여 로컬에서도 (Chrome에서도)로드 할 수 있습니다 .

map-01.js 파일 :

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

산출:

world width: 500

json 변수는 js 파일에서 선언되고 할당됩니다.

— 빅터 스토 다드
소스
0

Google의 폐쇄 라이브러리를 사용하는 솔루션을 찾지 못했습니다. 미래의 비 스터 목록을 완성하려면 클로저 라이브러리를 사용하여 로컬 파일에서 JSON을로드하는 방법은 다음과 같습니다.

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});
— 케니 806
소스
0 

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);
스 니펫 확장

JSON에 대한 새 자바 스크립트 파일을 만들고 JSON 데이터를 붙여 넣은 String.raw다음 코드를 파싱하는 것처럼 Cordova 앱 에서이 작업을 수행 했습니다JSON.parse

— 예바
소스
자바 스크립트 파일 인 경우 왜 JavaScript Object Notation(JSON)을 사용하지 않고 객체를 사용합니까?obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
— Nuno André
내가 문자열로 와서 아약스를 사용하여 일부 JSON 데이터를 가져 beause 내가 사용하는, 그래서 나는 그것을 사용 JSON.parse자바 스크립트 객체로 변환하는
— Jeeva
0 
function readTextFile(srcfile) {
        try { //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            }

        } catch (e) {

        }
}

readTextFile("C:\\Users\\someuser\\json.txt");

내가 한 것은 무엇보다도 먼저 네트워크 탭에서 서비스의 네트워크 트래픽을 기록하고 응답 본문에서 json 객체를 로컬 파일에 복사하여 저장했습니다. 그런 다음 로컬 파일 이름으로 함수를 호출하면 위의 jsonOutout에서 json 객체를 볼 수 있습니다.

— 펑 장
소스
2
코드를 붙여 넣는 대신 솔루션을 설명하십시오. 문제 해결 방법을 설명하는 솔루션 만이 커뮤니티에 도움이 될 것입니다.
— gmuraleekrishna
참고 : InternetExplorer
— Sancarn
0

나를 위해 일한 것은 다음과 같습니다.

입력: 

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

자바 스크립트 코드 : 

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    {
        //alert("I am here");
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            }
        }
    }
    rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>
— 비슈와 스 미스 라
소스
-4

로컬 컴퓨터에 Python이 설치되어 있거나 설치하지 않아도되는 경우 다음은 내가 사용하는 로컬 JSON 파일 액세스 문제에 대한 브라우저 독립적 해결 방법입니다.

데이터를 JavaScript 객체로 반환하는 함수를 만들어 JSON 파일을 JavaScript로 변환하십시오. 그런 다음 <script> 태그로로드하고 함수를 호출하여 원하는 데이터를 얻을 수 있습니다.

여기 파이썬 코드 가 온다

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')
— 시럽
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.