복붙노트

[JQUERY] 지역 JSON 파일로드

JQUERY

지역 JSON 파일로드

해결법

  1. 1.당신이해야하므로 $ .getJSON 비동기입니다 :

    당신이해야하므로 $ .getJSON 비동기입니다 :

    $.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

  2. 2.나는 (내 AngularJS와 응용 프로그램을 테스트하기 위해) 동일한 필요가 있고, 내가 찾은 유일한 방법은 사용 require.js이다 :

    나는 (내 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/

  3. 3.더 현대적인 방법으로, 당신은 지금 가져 오기 API를 사용할 수 있습니다 :

    더 현대적인 방법으로, 당신은 지금 가져 오기 API를 사용할 수 있습니다 :

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

    모든 현대적인 브라우저 API를 가져 오기 지원합니다. (Internet Explorer가되지 않지만, 가장자리는 않습니다!)

    출처:

  4. 4.당신은 사용자가 (어느 곳에서나 파일 시스템) 로컬 JSON 파일을 선택할 수 있도록하려면, 다음 솔루션은 작동합니다.

    당신은 사용자가 (어느 곳에서나 파일 시스템) 로컬 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/

  5. 5.당신이 뭔가를 신속하고 더러운 찾고 있다면 당신의 HTML 문서의 머리에 데이터를로드합니다.

    당신이 뭔가를 신속하고 더러운 찾고 있다면 당신의 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"}
})();

    나는 (크롬) 힙 크기는 데이터가 다른 방법을 찾는 것이보다 큰 그렇다면, 만 4GB에 대한 것을 언급해야한다. 검사 할 경우 다른 브라우저이 시도 :

    window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

  6. 6.

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

    CONST loadJSON = (콜백) => { ) (xobj = 새로운 XMLHttpRequest의하자; xobj.overrideMimeType ( "응용 프로그램 / JSON"); xobj.open (사실 'my_data.json'을 'GET'); // 파일의 경로와 함께 'my_data를'교체 xobj.onreadystatechange = () => { 경우 (4 xobj.readyState === && xobj.status === 200) { // 익명 콜백의 필수 사용 // 값을 반환하지 않습니다) (.open 단순히 비동기 모드에서 정의되지 않은 반환로 콜백 (xobj.responseText); } }; xobj.send (NULL); } CONST INIT = () => { loadJSON ((대응) => { 객체로 // 구문 분석 JSON 문자열 actual_JSON = JSON.parse (대응)을 보자; }); }

  7. 7.나는이 질문이 이해 및 / 또는 오리지널 포스터의 실제 코드의 문제를 해결하지 않고 대답 된 횟수를 믿을 수 없다. 그건 내가 초보자 나 자신 (코딩의 단지 2 개월)이야 말했다. 내 코드는 완벽하게 작업을 수행하지만, 어떤 변경을 제안 주시기 바랍니다. 여기에 솔루션입니다 :

    나는이 질문이 이해 및 / 또는 오리지널 포스터의 실제 코드의 문제를 해결하지 않고 대답 된 횟수를 믿을 수 없다. 그건 내가 초보자 나 자신 (코딩의 단지 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의 $ 아약스를 사용할 수 있습니다 :

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

    마지막으로,이 작업을 수행하는 마지막 방법은 함수에서 $ 아약스을 래핑하는 것입니다. 나는이 일에 대한 크레딧을받을 수 없어,하지만 난 그것을 조금 수정했다. 나는 그것을 테스트하고 그것을 작동 이상 내 코드와 같은 결과를 얻을 수 있습니다. 내가 여기에이 솔루션을 발견 - 변수로>로드 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"
}

  8. 8.나는 (작은 파일과 함께 사용) ES6 언급되지 않은에서 놀랄 수입 해요

    나는 (작은 파일과 함께 사용) ES6 언급되지 않은에서 놀랄 수입 해요

    예 : './test.json'에서 가져 오기 테스트

    웹팩 2 <.json 파일에 대한 기본값으로 JSON 로더를 사용합니다.

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

    타이프 라이터의 경우 :

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

    내가 먼저 모듈을 선언했다 작업을 얻을 수 있습니다. 나는이 사람을 몇 시간을 절약 할 수 있기를 바랍니다.

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

...

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

    내가 JSON 로더에서 생략 로더 시도하면 나는 웹팩에서 다음 오류가 발생했습니다 :

  9. 9.시도는 방법 (뿐만 아니라 자바 스크립트는 클라이언트 파일 시스템에 액세스 할 수없는 것을 바랍니다 주)입니다 :

    시도는 방법 (뿐만 아니라 자바 스크립트는 클라이언트 파일 시스템에 액세스 할 수없는 것을 바랍니다 주)입니다 :

    $.getJSON('test.json', function(data) {
  console.log(data);
});

  10. 10.최근 D3js 지역 JSON 파일을 처리 할 수 ​​있습니다.

    최근 D3js 지역 JSON 파일을 처리 할 수 ​​있습니다.

    이 문제입니다 https://github.com/mbostock/d3/issues/673

    이 지역 JSON 파일과 작업에 D3에 대한 패치 중위입니다. https://github.com/mbostock/d3/pull/632

  11. 11.로컬 JSON 파일을로드 (실패) 시도 할 때이 스레드를 발견. 이 솔루션은 나를 위해 일한 ...

    로컬 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>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>

  12. 12.타이프 라이터에서는 지역 JSON 파일을로드 가져 오기를 사용할 수 있습니다. 예를 들어, font.json로드 :

    타이프 라이터에서는 지역 JSON 파일을로드 가져 오기를 사용할 수 있습니다. 예를 들어, font.json로드 :

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

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

    // tsconfig.json

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

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

  13. 13.내가 한 일은 JSON 파일의 작은 비트를 편집했다.

    내가 한 일은 JSON 파일의 작은 비트를 편집했다.

    myfile.json => myfile.js

    JSON 파일에서, (그것 JS 변수 확인)

    {이름 : "무엇이든"} => var에 X = {이름 : "무엇이든"}

    끝에,

    수출 기본 X;

    그때,

    './myfile.js'에서 가져 오기 JsonObj;

  14. 14.각도 (또는 다른 프레임 워크)에서 사용로드 할 수 HTTP GET 나는 이런 식으로 뭔가를 사용 :

    각도 (또는 다른 프레임 워크)에서 사용로드 할 수 HTTP GET 나는 이런 식으로 뭔가를 사용 :

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

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

  15. 15.사용에 같은 접근 내가 패드입니다 / A .jsonp 파일 확장자를 가진 파일을 저장 한 후 객체 리터럴로 JSON을 포장합니다. 대신 새 JSONP 파일 (test.jsonp)와 함께 작업 할이 방법은, 원래 JSON 파일 (test.json) 변경되지 않은 잎. 래퍼의 이름은 무엇이든 될 수 있지만, 당신은 JSONP를 처리하는 데 사용하는 콜백 함수와 같은 이름을 할 필요가 없습니다. 나는 'test.jsonp'파일에 대한 JSONP 래퍼 추가를 보여 예로 게시하여 test.json를 사용합니다.

    사용에 같은 접근 내가 패드입니다 / A .jsonp 파일 확장자를 가진 파일을 저장 한 후 객체 리터럴로 JSON을 포장합니다. 대신 새 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 유효성 검사기에 그것을 확인합니다.

  16. 16.당신은 질문 (test.json)에 예에 가리 켰을 때, 다음 JQuery와의 parseJSON () 메소드가 수 - - 당신이 JSON에 대한 로컬 배열을 사용하는 경우>

    당신은 질문 (test.json)에 예에 가리 켰을 때, 다음 JQuery와의 parseJSON () 메소드가 수 - - 당신이 JSON에 대한 로컬 배열을 사용하는 경우>

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

    해서 getJSON ()는 원격 사이트에서 JSON을 얻기 위해 사용된다 - (로컬 HTTP 서버를 사용하지 않는 경우)가 로컬에서 작동하지 않습니다

  17. 17.

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


             }
  });

  18. 18.당신은 자바 스크립트 파일에 JSON을 넣을 수 있습니다. 이것은 jQuery의 getScript () 함수를 사용하여 (심지어 크롬에서) 로컬로드 할 수 있습니다.

    당신은 자바 스크립트 파일에 JSON을 넣을 수 있습니다. 이것은 jQuery의 getScript () 함수를 사용하여 (심지어 크롬에서) 로컬로드 할 수 있습니다.

    지도 - 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 파일에 할당되는 것을 알 수 있습니다.

  19. 19.json_str String.raw` = [{ "이름": "Jeeva"}, { "이름": "쿠마"}] '; OBJ = JSON.parse (json_str); CONSOLE.LOG (OBJ [0] [ "이름"]);

    json_str String.raw` = [{ "이름": "Jeeva"}, { "이름": "쿠마"}] '; OBJ = JSON.parse (json_str); CONSOLE.LOG (OBJ [0] [ "이름"]);

    나는 내가 JSON에 대한 새로운 자바 스크립트 파일을 만든 것처럼, 내 코르도바 앱 이런 짓을하고 String.raw로 JSON 데이터는 다음 JSON.parse로 구문 분석 붙여

  20. 20.

    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 객체를 볼 수 있어야합니다.

  21. 21.무엇 나를 위해 일한 것은 다음과 같다 :

    무엇 나를 위해 일한 것은 다음과 같다 :

    입력:

    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>

  22. 22.나는 구글의 폐쇄 라이브러리를 사용하는 솔루션을 발견하지 않았습니다. 그래서 여기 당신이 폐쇄 라이브러리와 로컬 파일에서 JSON을로드하는 방법, 미래의 객원 대한 목록을 완료합니다 :

    나는 구글의 폐쇄 라이브러리를 사용하는 솔루션을 발견하지 않았습니다. 그래서 여기 당신이 폐쇄 라이브러리와 로컬 파일에서 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);
});

  23. 23.파이썬은 로컬 컴퓨터에 설치되어있는 (또는 당신이 하나를 설치 괜찮다), 여기 내가 사용하는 것이 지역 JSON 파일 액세스 문제에 대한 브라우저에 독립적 인 해결 방법은 :

    파이썬은 로컬 컴퓨터에 설치되어있는 (또는 당신이 하나를 설치 괜찮다), 여기 내가 사용하는 것이 지역 JSON 파일 액세스 문제에 대한 브라우저에 독립적 인 해결 방법은 :

    함수를 작성하여 자바 스크립트로 JSON 파일을 변환하는 반환 자바 스크립트 객체와 데이터를. 그런 다음

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 아약스 오류 처리, 쇼 사용자 정의 예외 메시지  (0) 2020.09.26
[JQUERY] 자바 스크립트 그래프 시각화 라이브러리  (0) 2020.09.26
[JQUERY] jQuery를 사용한 배열에 JS 객체 변환  (0) 2020.09.26
[JQUERY] jQuery를 사용하여 이미지 소스 변경  (0) 2020.09.26
[JQUERY] 동적 높이 폭 (CSS 레이아웃 유체) 중복]이면  (0) 2020.09.26
,

티스토리툴바