2010-11-22 3 views
0

그래서 처음으로 JSON을 사용해 보겠습니다. 출력하려고하는 Twitter API 피드가 있습니다. 내가 어디로 잘못 가고 있는지 궁금해. 첨부 된 내 코드입니다.JSON jQuery 질문

<!DOCTYPE html> 

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
    </head> 
    <body> 
    <ol class="result"></ol> 
    <script> 
     $.getJSON('http://api.twitter.com/1/trends/1105779.json', function(json) { 
     alert(json.trends.query[1]); 
     $('.result').html('<li>' + json.trends.query + '</li>'); 
     }); 
    </script> 
    </body> 
</html> 
<!-- http://api.twitter.com/1/trends/1105779.json --> 
+4

그리고 나는 당신의 문제가 뭔지 궁금 해요 :

모두 함께 퍼팅? – jfar

+0

해당 URL은 JSON 문자열을 반환하지 않습니다. – Inigoesdr

+1

그렇습니다 ..... – Hamish

답변

5

URL을 'http://api.twitter.com/1/trends/1105779.json?callback=?'으로 변경하십시오.

XHR 정책 제한 사항을 해결하려면 요청을 JSONP해야합니다.

URL에 callback=?과 비슷한 내용이 포함되어있는 경우 jQuery는 요청을 JSONP 요청으로 만들기 위해 마술을 사용합니다. 이에 대한 자세한 내용은 :

alert(json.trends[1].query); 

trendsquery 키가 각각의 개체의 목록입니다 : http://api.jquery.com/jQuery.getJSON/

0

당신이 준 URL에 의해 반환 된 JSON을 보면, 당신이 필요합니다.

2

query에 액세스하려는 중입니다. 배열 인 것처럼 문제가 발생했습니다. 그것은 아닙니다, 그것은 목표입니다. trends이 실제 배열입니다. 당신이 당신이하려고하는 표시되는 내용입니다 trends 배열에서 두 번째 객체의 query 속성을 원한다면 그래서, 당신이 할 것 :

var query = json.trends[1].query; 

편집 :

당신이 경우, 덧붙여 설명자가 말하듯이 첫 번째 요소에 액세스하려는 경우 trends 배열 색인 0에 있습니다. 그래서 : trends가 배열이 아닌 객체이며, 프로퍼티 query이 없기 때문에

var query = json.trends[0].query; 

두 번째 문은, json.trends.query도 유효하지 않습니다. 각각의 query 속성을 trends 배열의 모든 개체에서 가져 오는 것이 목적이라면 jQuery의 $.each() 반복 구문을 사용하십시오. 그래서 같이 :

$.each(json.trends, function(i, result) { 
    $('.result').append(result.query); 
}); 

당신은 또한 당신이 $.getJSON()에 전달하여 쿼리 문자열의 끝에 callback=?를 추가해야합니다. jQuery는 ?을 무작위로 생성 된 함수 이름으로 대체하여 jQuery가 콜백 함수를 호출하고 데이터를 전달할 수있게합니다. 이는 JSONP 요청을 구현하며 same-origin policy의 적용을받지 않습니다.

$.getJSON('http://api.twitter.com/1/trends/1105779.json?callback=?', function(json) { 
    alert(json.trends[1].query); 
    $.each(json.trends, function(i, result) { 
     $('.result').append(result.query); 
    }); 
    }); 
+0

'json [0] .trends' (최소한 크롬이 포함 된 것)처럼 보입니다 – Hamish

+0

아니요 ... 그가 게시 한대로 답변했습니다. 배열의 * second * 요소에 액세스합니다.이 요소는 인덱스 '1'에 있습니다. – Alex

+0

'@ Hamish' 저는 완전성을 위해 제 대답을 업데이트했습니다. – Alex