javascript - 파일 - 스프링 getjson




로컬 JSON 파일로드 중 (14)

Google의 클로저 라이브러리를 사용하는 솔루션을 찾지 못했습니다. 향후 빌더 목록을 완성하기 위해 Closure 라이브러리가있는 로컬 파일에서 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);
});

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

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

test.json 파일 :

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

아무 것도 표시되지 않고 파이어 버그가 데이터가 정의되지 않았다고 알려줍니다. Firebug에서 나는 json.responseText 를 볼 수 있으며, 유효하고 유효하지만, 줄을 복사 할 때 이상하다.

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

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

누구나 해결책이 있습니까?


JSON 용 로컬 배열을 사용하는 경우 - 질문 (test.json)의 parseJSON 에서 parseJSON JQuery의 parseJSON 메소드 ->

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

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


es6에서 가져온 내용이 언급되지 않았다는 것에 놀랐습니다 (작은 파일 사용).

예 : import test from './test.json'

webpack 2는 .json 파일의 기본값으로 json-loader 를 사용합니다.

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

TypeScript의 경우 :

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';

json-loader loader 에서 loader 를 생략하려고하면 webpack 에서 다음 오류가 webpack .

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


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 파일에 선언되고 지정됩니다.



나는이 질문이 오리지널 포스터의 실제 코드에 대한 문제를 이해하거나 해결하지 않고 몇 번이나 대답되었는지 믿을 수 없다. 즉, 나는 초심자이다 (코딩의 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를 감싸는 것입니다. 나는 이것을 위해 신용 할 수는 없지만 조금 수정했다. 나는 그것을 테스트하고 작동하고 위의 코드와 동일한 결과를 산출한다. 나는이 해결책을 여기서 발견했다.

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

내가 사용하고자하는 접근법은 json에 객체 리터럴을 덧씌우 기 / 래핑 한 다음 .jsonp 파일 확장명으로 파일을 저장하는 것입니다. 이 방법은 또한 새로운 jsonp 파일 (test.jsonp)로 작업하기 때문에 원본 json 파일 (test.json)을 변경하지 않습니다. 래퍼의 이름은 무엇이든 상관 없지만 jsonp를 처리하는 데 사용하는 콜백 함수와 동일한 이름이어야합니다. 'test.jsonp'파일에 대한 jsonp 래퍼 추가를 보여주기 위해 test.json을 예제로 사용하겠습니다.

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 유효성 검사기에서 확인하십시오.


더 빠르고 더러운 것을 찾고 있다면 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"}
})()


사용자가 로컬 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/



파이썬을 로컬 컴퓨터에 설치했거나 설치하는 데 신경 쓰지 않는다면, 여기에 사용하는 로컬 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]')

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

console.log(obj[0]["name"]);

JSON에 대한 새 javascript 파일을 만들고 JSON 데이터를 String.raw 붙여 넣은 다음 JSON.parse 로 구문 분석하는 것처럼 코드 도구 앱 String.raw 을 수행했습니다.


$.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_);
                      }
                 });


             }
  });






local-files