2014-12-03 2 views
0

다음은 두 개의 로컬 데이터 파일을 읽고 그 결과를 카드에 표시된 DOM에 추가 한 다음 카드의 손을 나타내는 순서가 지정되지 않은 목록에 추가하는 간단한 작업 예제입니다..getJSON을 사용하여 로컬 JSON 파일을 일관되게 읽지 않는 이유는 무엇입니까?

:

var main = function() { 
    "use strict"; 

    $.getJSON("cards/aceOfSpades.json", function (data) { 
     // create an element to hold the data 
     var $cardParagraph = $("<p>"); 
     console.log("STUBB"); 
     // create the 
     $cardParagraph.text(data.rank + " of " + data.suit); 

     // append the card paragraph to main 
     $("main").append($cardParagraph); 
    }); 

    $.getJSON("cards/hand.json", function (hand) { 
     var $list = $("<ul>"); 

     // hand is an array, so we can iterate over it 
     hand.forEach(function (data) { 
      // create a list item to hold the card 
      // and append it to the list 
      var $card = $("<li>"); 
      $card.text(data.rank + " of " + data.suit); 
      $list.append($card); 
     }); 
     // append the list to main 
     $("main").append($list); 
    }); 
}; 
$(document).ready(main); 

hand.json

[ 
    { "suit" : "spades", "rank" : "ace" }, 
    { "suit" : "hearts", "rank" : "ten" }, 
    { "suit" : "spades", "rank" : "five" }, 
    { "suit" : "clubs",  "rank" : "three" }, 
    { "suit" : "diamonds", "rank" : "three" } 
] 

모방이 app.js, 내 코드는 JSON 기록 비슷한 배열로 파일 읽기를 시도 checkBoxesA.json

[ 
    { 
     "label": "New provider", 
     "note": "check if the applicant is not currently enrolled in the Medi-Cal 
       program as a provider with an active provider number. Include 
       the NPI (or Denti-Cal provider number if applicable) for the 
       business address indicated in item 4. " 
    }, 
    { "label": "Change of business address", 
     "note": "check if the applicant is currently enrolled in the Medi-Cal 
       program and is requesting to relocate to a new business address 
       and vacate the old location. Indicate the business address 
       applicant is moving from." 
    }, 
    . . . 
] 

다음은 작동하지 않는 javaScript입니다. STBB1이 콘솔에 인쇄되지 않으므로 $.getJSON이 무시됩니까?

var main = function() { 
    "use strict"; 

    console.log("Hello World!"); 

    $.getJSON("checkBoxesA.json", function (entry) { 
     var $list = $("<ul>"); 

     console.log("STUBB1!"); 
     entry.forEach(function(entry){ 
      var $entry =$("<li>"); 
      $entry.text(entry.label + " of " + entry.text); 
      $list.append($entry); 
     }); 

     $("main").append($list); 
    }); 

    console.log("STUBB2!"); 
}; 
$(document).ready(main); 
+1

나는 그 질문을 명확히했다! – user2970900

+0

이 코드를 실행 한 결과는 (1) 첫 번째 경우의 첫 번째 (성공한) 예제에서 DOM 수정 사항을 표시하거나 두 가지 예에서 콘솔 오류를 로깅하지 않는 것과 (1) 다른 경우에는 (2) 콘솔 로그 오류가 발생합니다. – user2970900

답변

0

STUBB1 그래서 .getJSON이 무시됩니다 $ 콘솔에 인쇄되지 않는 이유는 무엇입니까?

무시하지 마십시오. 오류 요청을 처리 할 가능성이 높지만 오류 조건을 처리하기위한 코드를 추가하거나 브라우저의 콘솔에서 코드를 추가 할 때까지는 알 수 없습니다. $.getJSON은 결국 비동기식입니다. 나는 onhttp : //api.jquery.com/jquery.getjson/을 읽기위한 사이트를 제안 할 것이고, 몇 가지 예가있다.

+0

두 경우 모두 콘솔에 기록 된 오류가 없으며 프로그래밍 스터브에서 출력됩니다. 첫 번째 경우에는 확장 DOM이 표시됩니다. – user2970900

0

(1) Chrome이 완전히 종료 된 후에이 셸 명령을 실행하지 않으면 Chrome의 JavaScript가 로컬 JSON 데이터 파일을 읽을 수 없습니다.

개방 -a 구글 \ 크롬은 --allow-파일 액세스에서-파일

이 같은 파일에 대한 액세스를 제한에서 제외하는 새로운 브라우저를 실행을 --args.

Safari 나 Firefox에서는이 작업을 수행 할 필요가 없습니다.

(2) JSON 파일의 텍스트는 중첩 된 큰 따옴표 나 작은 따옴표없이 올바르게 구성되어야합니다.

따라서이 문제는 내 문제를 해결합니다.

관련 문제