JSON 파일을 자바스크립트로 어떻게 가져오시겠습니까?

JSON 파일을 자바스크립트로 어떻게 가져오시겠습니까?

내용이 포함된 JSON 파일이 있습니다.

{"name" : "Conrad", "info" : "tst", "children" : [
    {"name" : "Rick" },
    {"name" : "Lynn" },
    {"name" : "John", "children": [
        {"name" : "Dave", "children": [
            {"name" : "Dave" },
            {"name" : "Chris" }      
        ]},
        {"name" : "Chris" }
    ]}
  ]};

자바스크립트 파일 안에 이 JSON 파일 데이터를 가져와서 다음과 같은 최종 결과를 얻고 싶습니다.

var treeData ={"name" : "Conrad", "info" : "tst", "children" : [
        {"name" : "Rick" },
        {"name" : "Lynn" },
        {"name" : "John", "children": [
                {"name" : "Dave", "children": [
                {"name" : "Dave" },
                {"name" : "Chris" }

         ] },
                {"name" : "Chris" }
         ]}
  ]};

많은 코드 샘플을 시도해 보았지만 아무 것도 작동하지 않았습니다.

다음과 같이 파일의 내용을 구문 분석합니다.

var treeData = JSON.parse(fileContent);

파일을 얻는 방법에 대해서는 설명하지 않지만 간단한 XMLHtpRequest를 사용하여 서버에서 파일을 로드할 수 있습니다.XMLHttpRequest를 사용하여 이를 위한 유용한 리소스가 있습니다.

수정 사항이 포함된 링크에서 발췌:

var treeData;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();

function reqListener(e) {
    treeData = JSON.parse(this.responseText);
}

아래 의견을 기반으로 업데이트:

파일을 로드할 수 없습니다.JSON.parse(). 이 함수는 기존 문자열을 개체(내용이 올바른 JSON 형식인 경우)로만 변환할 수 있습니다.

다음을 수행해야 합니다.

1. 예를 들어 AJAX(AJAX)를 사용하여 서버에서 변수로 파일을 로드합니다(그림 참조).보안상의 이유로 로컬 파일 경로를 사용할 수 없습니다.무료 경량 Mongoose 웹 서버와 같이 페이지를 실행할 로컬 서버를 설정합니다.이렇게 하면 루트를 로컬 폴더로 가리키고 다음을 사용하여 페이지를 로드할 수 있습니다.http://localhost/

2. 파일이 로드되면 내용을 다음으로 전달할 수 있습니다.JSON.parse()기능.위의 예는 전체 과정을 보여줍니다.코드에 있는 링크를 실제 링크로 바꾸기만 하면 됩니다.

(PS: jQuery 솔루션을 원하신다면 질문에 jQuery 태그를 붙여야 합니다.)

어때.$.getJSON

$.getJSON( "yourjsonfile.json", function( data ) {  
    console.log( "JSON Data: " + data);
    $.each( data, function( key, val ) {
        console.log(key + "value:: " + val );
    });
});

참조: http://api.jquery.com/jquery.getjson/

JSON 파일의 AJAX 요청을 수행한 다음 JSON.parse를 사용하여 결과를 treeData에 추가합니다.

var treeData = JSON.parse(ajaxFunction('jsonfile.php'));

그런 의미의 뭔가...(AJAX 기능에 따라 달라집니다.)

누군가 GULP를 사용하고 있다면 다음과 같이 해결할 수 있습니다.

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    insert = require('gulp-insert');

gulp.task('jsonConcat', function() {
  return gulp.src(['path/to/json/your-file.json'])
    .pipe(insert.prepend('treeData = '))
    .pipe(insert.append(';'))
    .pipe(concat('final-result.js'))
    .pipe(gulp.dest('path/to/destination/'));
});

언급URL : https://stackoverflow.com/questions/21450227/how-would-you-import-a-json-file-into-javascript