json 호출 및 루프 내에서 json 호출 및 루프로 각각

Question

나는 그 뉴스에 대한 특정 주제에 대한 모든 뉴스 헤드 라인과 내용을 가지고있는 두 개의 json 파일을 가지고 있습니다. 왜 그런지 묻지 마십시오. URL을로드하려고합니다. 모든 헤드 라인과 ID로 검색 한 후 적절한 콘텐츠를 찾습니다.

$.ajax({ 
    url: 'http://website.com/news.json?=list', 
    dataType: 'json', 
    success: function (data) { 

     $.each(data.news, function (newsId, newsHeadline) { 
      $('h1').after('<h2 id="question-' + newsId + '">' + newsHeadline + '</h2>'); 

      $.get('http://website.com/news.json?=list&id=' + newsId, function (data) { 

       $('h2').after('<div class="accordion-content">' + data.result.newscontent + '</div>'); 

      }); 

     }); 

    } 

}); 

지금까지의 작업이 예상대로 거의 그로드하는 헤드 라인을 장식하고 내용을로드 한 후 :

그것은 그렇게 찾고 있습니다.

각 헤드 라인의 모든 내용을로드하는 중입니다. 예를 들어 첫 번째 URL에는 2 개의 헤드 라인이 있습니다.

Headline 1 
    Content 1 
Headline 2 
    Content 2 

을하지만 그 대신 그것은 나를 제공 :

그래서해야 당신이 $.get() 핸들러에 추가 할 때 <h2>에 대한 참조를 자격을하지 않을

Headline 1 
    Content 1 
    Content 2 
Headline 2 
    Content 1 
    Content 2 

Answer 1

. 따라서 내용은 모두<h2> 요소에 추가됩니다.

Answer 2

비동기 방식으로 인해 아약스 호출이 작동합니다.
첫 번째 루프에서 콜백을 사용하여 아약스를 호출하고 두 번째 루프 호출을 계속 수행합니다 (아약스가 완료 될 때까지 기다리지 않고).
ajax 콜백은 다른 루프 중에있을 수 있으므로 1-1,2-2.3-3을 얻는 대신 1-2,2-2,3-2,4-3을 얻을 수 있습니다.
필요한 경우 중첩 된 비동기 콜백 대신 선형 방식으로 처리해야한다고 생각해야하는 것과 동일하게 유지됩니다.

Answer 3

데이터 변수를 두 번 사용하는 것과 관련이 있다고 생각합니다. 이 시도 :

$.ajax({ 
    url: 'http://website.com/news.json?=list', 
    dataType: 'json', 
    success: function (data) { 

     $.each(data.news, function (newsId, newsHeadline) { 
      $('h1').after('<h2 id="question-' + newsId + '">' + newsHeadline + '</h2>'); 

      $.get('http://website.com/news.json?=list&id=' + newsId, function (data2) { 

       $('h2').after('<div class="accordion-content">' + data2.result.newscontent + '</div>'); 

      }); 

     }); 

    } 

}); 

편집 : 뾰족한가 올바른지처럼

는 죄송합니다 ... 보인다. $ ('h2') 선택기 내에서 $ .get() 함수는 페이지의 모든 h2 HTML 요소를 가져옵니다.