JSON 파일 가져 오기

json 파일 (Steam API)을 가져 와서 테이블에 정렬 된 파일을 표시하려고합니다. 단추 및 목록으로 시도했지만 작동하지 않습니다. 그리고 나는 이것을 테이블로하는 방법을 모른다. (예 : http://carl-keinath.de/json.html) 모든 요소가 DOM에 액세스 할 수 있습니다 있도록 jQuery 코드가 body에서와 같이JSON 파일 가져 오기

<html> 
<head> 
    <title>JSON</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("button").click(function() { 
     $.getJSON("json_data.json", function(obj) { 
      $.each(obj, function(key, value) { 
       $("ul").append("<li>"+value.name+"</li>"); 
      }); 
     }); 
    });; 
</script> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 
</body> 
</html>

출처

2015-02-06 Chris P. Bacon

코드 자체가 좋습니다! 그러나 $("button")을 선택하면 브라우저가 실제로 button 태그 자체를 처리하지 않아서 해당 시점에 존재하지 않으며 click 이벤트가 등록되지 않습니다.

가 <button> 스크립트 구문 분석되는 시간으로 존재 할 경우에 <body> 태그 내 말에 <script> 태그를 이동
:

는 두 가지 해결책이 있습니다.

당신은 어디에 당신의 <script> 태그를 유지하지만, 전체 문서를 구문 분석하고 준비 읽을 때 콜백 함수를 실행 jQuery's $(document).ready() 핸들러에 전체 스크립트를 래핑 할 수 있습니다

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function() { 
      $.getJSON("json_data.json", function(obj) { 
       $.each(obj, function(key, value) { 
        $("ul").append("<li>"+value.name+"</li>"); 
       }); 
      }); 
     }); 
    }); 
</script>

출처

2015-02-06 10:03:53

남자 감사합니다! : D –

, 그것은 단지 전에 </body> 태그를 가야한다. button 또는 ul 요소가 존재하기 전에 현재 코드가 실행 중입니다.

이 시도 :

<html> 
<head> 
    <title>JSON</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 

    <script type="text/javascript"> 
     $("button").click(function() { 
      $.getJSON("json_data.json", function(obj) { 
       $.each(obj, function(key, value) { 
        $("ul").append("<li>" + value.name + "</li>"); 
       }); 
      }); 
     }); 
    </script> 
</body> 
</html>

출처

2015-02-06 09:53:25

는이다 문서 준비 함수는'$ (function() {/ * 여기에 모든 코드에 대해 DOM로드 됨 * /}),' –

@northkildonan이 스크립트가'head'에있는 경우 적용됩니다. 본문의 끝에서 모든 요소는 DOM에서 사용할 수 있으므로 필요하지 않습니다. –

네, 도와 줬어! 너의 too –

<html> 
<head> 
    <title>JSON</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("button").click(function() { 
     $.getJSON("json_data.json", function(obj) { 
      $.each(obj, function(key, value) { 
       $("ul").append("<li>"+value.name+"</li>"); 
      }); 
     }); 
    }); 
}); 
</script> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 
</body> 
</html>

을 $(function() {와 JS 포장 - DOM에이 스크립트를 실행하기 전에로드 될 때까지 기다립니다 });.

출처

2015-02-06 09:58:50

JSON 파일 가져 오기

답변

관련 문제