2013-01-20 2 views
-1

나는 chatrooms를 생성하는 webapp을 만들고 있습니다. 그래서 콘솔에서 출력으로이 생성 룸 버튼을 클릭 되찾아 :jquery로 HTML 목록 만들기?

{ 
    "statusCode": 200, 
    "statusText": "QUEUE_OK", 
    "data": { 
     "roomStatus": "discussion", 
     "queue": [ 
      { 
       "id": "11", 
       "user": "1", 
       "room": "11", 
       "inserted": "2013-01-19 23:58:16", 
       "status": "1", 
       "data": null, 
       "first_name": "Danny", 
       "last_name": "Sock" 
      } 
     ] 
    } 
} 
난 그냥 이름과 성을 보여주는 HTML 목록으로 각 큐 항목을 돌려 가겠어요 어떻게

? 전에 jquery를 사용한 적이 없으므로 잃어버린 ... 감사합니다.

+0

여기에서 무엇을 돌려 주나요? 서버 측에서 뭔가를 생성하는 경우 text/html을 대신 반환 할 수 있습니다. 또한 응답을 묶을 수있는 HTML이 있습니까? –

+6

jQuery 튜토리얼을 먼저 읽는 것이 좋습니다. http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery. –

+0

HTML과 반대로이를 반환하는 것이 좋습니다. 실제로 그것은 올바른 장소에서 더 나은 접근 방법입니다. 콧수염 좀 봐. 템플릿을 사용하여 HTML로 변환하고 페이지에 추가하는 것이 매우 쉽습니다. – Popnoodles

답변

1

이 같은 HTML 요소가있는 경우 :

<ul id="list"></ul> 

당신은 같은 일을 할 수있는을 :

: json이 같은 질문에 나타났다 구조, 뭔가입니다

var ul = $("#list"); 
$.each(json.data.queue, function (idx, elem) { 
    ul.append("<li>" + elem.first_name + " " + elem.last_name + "</li>") 
}) 

var json = { 
    "statusCode": 200, 
    "statusText": "QUEUE_OK", 
    "data"  : { 
     "roomStatus": "discussion", 
     "queue"  : [ 
      { 
       "id"  : "11", 
       "user"  : "1", 
       "room"  : "11", 
       "inserted" : "2013-01-19 23:58:16", 
       "status" : "1", 
       "data"  : null, 
       "first_name": "Danny", 
       "last_name" : "Sock" 
      }, 
      { 
       "id"  : "12", 
       "user"  : "1", 
       "room"  : "11", 
       "inserted" : "2013-01-19 23:58:16", 
       "status" : "1", 
       "data"  : null, 
       "first_name": "John", 
       "last_name" : "Smith" 
      } 
     ] 
    } 
};