하나의 함수에서 두 개의 별개 JSON 파일의 데이터 사용

Question

main.js 파일의 함수에서 액세스하려고하는 두 개의 로컬 JSON 파일이 있습니다. 모든 것이 하나의 JSON 파일로 잘 작동하지만 두 번째 JSON 파일을 통합하는 방법을 잘 모르겠습니다. 이상적으로는 data_set1=$.getJSON("file1.json")과 같은 것이 완벽하게 작동하지만 유사한 질문에 반복적으로 질문하고 비동기 호출로 인해 반드시 가능하지는 않습니다 (이러한 질문에 대한 모든 대답을 완전히 이해하지 못함).

$.getJSON("data.json", function(json){ 

    var data_points = []; 
    for (i = 0; i < json.length; i++){ 
     data_points.push([json[i].name, json[i].age]); 
    } 

    $(function() { 
     //do stuff with data_points 

을하지만 사용하는 말에 기능에 대한 다른 목록을 만들 수있는 두 번째 JSON 호출을 통합하는 방법을 모른다 :

그대로이 작동합니다.

Answer 1

jQuery 지연로드를 사용할 수 있습니다.

var xFile, yFile; 

var requestX = $.getJSON("data1.json", function(json){ 
    xFile = json; 
}); 

var requestY = $.getJSON("data2.json", function(json){ 
    yFile = json; 
}); 

$.when(requestX, requestY).then(function(){ 
    // do something; 
    // this function only gets called when both requestX & requestY complete. 
}); 

체크 아웃, 내가 배열에있는 파일을 보관 것이다 약간 일을 일반화 @ MarcB의 솔루션과 매우 유사한 것을 사용하여 JQuery WHEN

Answer 2

ajax 요청은 하나의 리소스에 대한 하나의 요청입니다. 같은 요청으로 두 개의 다른 리소스를 가져올 수 없습니다.

var completed = 0; 

$.getJSON('file1.json', function(json) { 
    completed++; 
    if (completed == 2) { all_done(); } 
} 
$.getJSON('file2.json', function(json) { 
    completed++; 
    if (completed == 2) { all_done(); } 
} 

function all_done(...) { ... } 

또는 단순히 서버에서 하나 하나에 당신이 개 JSON 파일을 결합 : 당신도 두 요청해야 할 것

{"file1":{data from file one here}, "file2":{data from file two here}} 

및 코드에서 data.file1 및 data.file2로 액세스 할 수 있습니다.

Answer 3

파일로드를 나타내는 var를 설정하고 상태를 확인하는 동안 동일한 함수를 호출 할 수 있습니다. 이것은 JSON의 데이터 양에 따라 나쁜 생각 일 수 있습니다.

var xFileLoaded = false, yFileLoaded = false; 
var xFile, yFile; 

$.getJSON("data.json", function(json){ 
    xFile = json; 
    xFileLoaded = true; 
    doSomething(); 
}); 

$.getJSON("data.json", function(json){ 
    yFile = json; 
    yFileLoaded = true; 
    doSomething(); 
}); 

function doSomething() { 
    if(xFileLoaded && yFileLoaded) { 
     // good to go 
    } 
} 

Answer 4

:

var files = ["file1.json", "file2.json"]; 
var results = {}; 
var completed = 0; 

function afterEach(fileName, json) { 
    results[fileName] = json; 
    if (++completed >= files.length) { 
     afterAll(); 
    } 
} 

files.forEach(function (file) { 
    $.getJSON(file, afterEach.bind(this, file)); 
}); 

이 병렬로 모든 파일을 요청해야합니다 브라우저가 실제로 열거 나 다운로드 할 연결 수를 선택할 수 있습니다. 각 작업이 끝나면 결과 (json)는 파일 이름 아래에 저장하기 위해 해시에 저장됩니다. 모든 파일이 완료되면 (files은 변경되지 않음), afterAll 함수가 호출됩니다. 두 통화가 완료되면

$.when(
    $.ajax({ 
     url: 'file1.json/', 
     success: function(data) { 
      // Treatement 
     } 
    }), 
    $.ajax({ 
     url: 'file2.json', 
     success: function(data) { 
      // Treatement 
     } 
    }) 
).then(function(){ 
    // Two calls are completed 
}); 

, 당신은 "다음"블록에 어떤 조작을 수행 할 수 있습니다

Answer 5

그것은 jQuery로이 작업을 수행하는 우아한 방법이 존재한다.