JSON 및 jQuery

저는 주로이 작업을합니다. 내가 얻지 못하는 것은 파일을 바탕 화면에두고 브라우저에 끌어다 놓으면 작동한다는 것입니다. 동일한 파일을 내 웹 사이트에 업로드하고 방문하면 Firefox에 아무것도 표시되지 않습니다. 지난 밤 Safari에서 작동했지만 오늘은 Safari에서 작동하지 않습니다. 이 코드에서 정말 이상한 것이 있습니까? 여기에 :) 여기에 모든 문제가 해결되지 않습니다 붙여 경우에 pastie 당신이 단지 각각의 요소를 통해 갈 것 콜백 함수에서JSON 및 jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 

<style type="text/css" media="screen"> 
    body{ 
     background: #353535; 
     color: #fff; 
     font-size: 62.5%; 
     padding: 10px; 
    } 
    p{ 
     font-size: 1.6em; 
     font-family: Arial, "MS Trebuchet", sans-serif; 
    } 
    span{ 
     font-size: 1.6em; 
     font-variant: small-caps; 
    } 
    ul { 
     list-style: none; 
    } 
    li { 
     font-size: 1.6em; 
     text-transform: capitalize; 
    } 
    img{ 
     float: left; 
     margin: 10px; 
    } 
</style> 

<!-- actual api http://api.tinychat.com/designtalk.json --> 
<!-- testing file test.json --> 

    <script> 
    $(document).ready(function(){ 
    $.getJSON("http://api.tinychat.com/designtalk.json", 
     function(data){ 

     $('#name').append(data.name); 
     $('#topic').append(data.topic); 
     $('#broadcast').append(data.broadcaster_count); 
     $('#count').append(data.total_count); 
     $('#priv').append(data.priv); 

if(!data.name) 
{ 
    alert("Room empty!") 
} 

    var $nameList = $('<ul></ul>'); 

    $.each(data.names, function (i, val) { 
     $('<li></li>').appendTo($nameList).html(val); 
    }); 

    $('#container').append($nameList); 

    $.each(data.pics, function (i, val) { 

     $("<img/>").attr("src", val).appendTo("#images"); 

    }); 

     }); 

    }); 
    </script> 
</head> 
<body> 
    <p id="name"><span>Room Name:</span> </p> 
    <p id="topic"><span>Current Topic:</span> </p> 
    <p id="broadcast"><span>Number Broadcasting:</span> </p> 
    <p id="count"><span>Total in Room:</span> </p> 
    <p id="priv"><span>Number with Privileges:</span> </p> 

    <div id="container"><span>Who is Online?</span></div> 
    <div id="images"></div> 
</body> 
</html>

출처

2009-09-08 thatryan

당신은 예를 들어 HTML 목록 구축, 프로그래밍 HTML 요소를 만들 수 있습니다

$('<div></div>').appendTo('#container').html(data.title); 

var $nameList = $('<ul></ul>'); 

$.each(data.names, function (i, val) { 
    $('<li></li>').appendTo($nameList).html(val); 
}); 

$('#container').append($nameList);

을 예 here. jQuery를하지 않고

var container = document.getElementById('container'), 
    title = document.createElement('div'), 
    nameList = document.createElement('ul'), li; 

title.innerHTML = data.title; 
for (var i = 0; i < data.names.length; i++) { 
    li = document.createElement('li'); 
    li.innerHTML = data.names[i]; 
    nameList.appendChild(li); 
} 

container.appendChild(title); 
container.appendChild(nameList);

예 here.

편집 : 귀하의 코멘트에 대한 응답으로, 당신은 JSONP 요청을 만들기 위해 Flickr specific 매개 변수 jsoncallback 누락되었고, 또한 JSON의 구조에 당신이 items을 의미 생각의 names 구성원이 존재하지 않습니다은 응답.

피드 예를 확인하십시오. here.

출처

2009-09-08 00:41:52 CMS

하나의 json2.js 라이브러리가 필요하지 않습니다를 하나는 순수한 JS이고 다른 하나는 jQuery로 테스트되었고 두 가지 모두 테스트되었습니다 :) – karim79

도움을 주신 모든 분들께서, 저는 여전히 고집이났습니다. 이유를 모르겠습니다. flickr에서 테스트 JSON 피드를 사용하여이 jquery 메서드를 시도했지만 아무 일도 일어나지 않았습니다. 나는 바보 같은 것을 놓치고 있니? 여기 코드가 있습니다. 여기에 충분한 공간이 없었습니다. 그래서 그것은 파스리 위에 있습니다. http://pastie.textmate.org/private/wqtv1pgtri0fpnrkczgifw 다시 한번 감사드립니다. – thatryan

다시 한 번 감사드립니다. 현재 문제가 무엇인지 반영하기 위해 원본 게시물을 변경했습니다. 감사의 도움을받을 수 있기를 바랍니다. – thatryan

. 의 당신은 당신이 할 수 namesDiv의 ID로 사업부에 이름을 추가하고 싶어한다고 가정 해 봅시다 :

$.get("something.aspx", function(json) { 
    for(var i =0; i< json.names.length; i++) 
    { 
     $('#namesDiv').append(json.names[i]); 
    }

출처

2009-09-08 00:38:13 stimms

json 데이터를 포맷하는 firefox 플러그인이 있습니다.

이 https://addons.mozilla.org/en-US/firefox/addon/10869은 치아에 매우 긴 ... 당신은 단지 JSON 데이터의 모양 때문에 거기에 프로그래밍을 시작 무엇을 배우고 싶은

출처

2009-09-08 00:42:27 deostroll

가정되지만 있음을 인식하는데주의를 기울여야 않는 개체의 속성 자신의 속성도 가질 수 있습니다. ID가 "content"인 DIV 요소 (또는 유사한 요소)가 있다고 가정합니다.

function WriteObject(obj, tabs) 
{ 
    tabs = tabs || 0; 

    var padding = ""; 

    for(var i = 0; i < tabs; ++i) 
    { 
    padding += "\&nbsp;"; 
    } 

    for(var prop in obj) 
    { 
    if(typeof(obj[prop]) === "object") 
    { 
     if(obj[prop].constructor === Array) 
     { 
     var str = obj[prop].join(","); 
     $("#content").append(padding + prop + ": " + str + "<br />");   
     }  
     else 
     { 
     $("#content").append(padding + prop + "<br />"); 
     WriteObject(obj[prop], tabs + 1); 
     } 
    } 
    else 
    { 
     $("#content").append(padding + prop + ": " + (obj[prop] ? obj[prop] : "null") + "<br />");    
    } 
    } 
}

출처

2009-09-08 01:00:42

당신은 아래의 페이지 시도 할 수 있습니다 : 당신이 두 가지 예를 가지고 그 사랑, 최신 브라우저에서
더 이상 json.org

<html> 
<head> 
    <script src="http://www.json.org/json2.js"></script> 
</head> 
<body> 
    <pre id="res"></pre> 

    <script> 
     var json = { 
      "title":"No title", 
      "names":["", "dave", "jeff", "sean", "", ""], 
      "total_people":3 
     }; 
     document.getElementById('res').innerHTML = JSON.stringify(json, null, 2); 
    </script> 
</body> 
</html>

출처

2009-09-08 14:06:37 Mic

JSON 및 jQuery

답변

관련 문제