jquery를 사용하여 html로 중첩 된 json 객체

Question

나는 잠시 동안이 작업을 해왔다. 알아낼 수 없었다. 나는 질문을 올렸고, 나는 현재 코드를 사용하고있다. 자신이 완벽하게 작동

쓸모없는 코드지만, 문제는 데이터가 포함되어 있습니다 : 두 번째 대답은 코드 사용자에 따라 매우 parsing nested JSON String objects with JQuery/PHP?

(당신은 내가에서오고 어디에 이해하는 내 첫 번째 게시물을 읽어야) 동일한 페이지 파일에서 한 번만 앨범입니다. json을 당겨야합니다.

http://www.ggcc.tv/json2php/posts.php

도움 전체 코드를 사용하시기 바랍니다 모든 앨범 및 콘텐츠 post.php

에서

목록 ggcc.tv/json2php/index.html 메인 인덱스 페이지가 (내가 JSON/php에 새로운 해요 이후

그래서 기본적으로 내가 코드가 필요 쓸모없는 코드 (사용자로부터 제안 : 쓸모없는 코드) 데이터/http://www.ggcc.tv/json2php/posts.php 각 앨범을 뽑아 사용자로부터 제안/JQuery와 등 ...

코드 사용 각 앨범 및 앨범 목록을 나열하십시오.

이 게시물 내 원래의 게시물을 읽고 여기에 답변을 남겨주세요, 당신은

Answer 1

이 시도 감사 : 또한

<script type="text/javascript"> 
    $(document).ready(function() { 
    var url="/json2php/posts.php"; 
    $.getJSON(url,function(data){ 
     $.each(data.posts,function(i,post) { 
     var content, 
     trackInfo = '', 
     tracks = post.tracks; 

     // loop over the tracks and collect info 
     $.each(tracks, function (i) { 
      trackInfo += '<a href="' + tracks[i].url + '">' + tracks[i].name + '</a> '; 
     }); 

     content = '<div class="post">'+ 
     '<h1>'+post.album+'</h1>'+ 
     '<p><img src="'+post.artwork+'"width="250"></img></p>'+ 
     '<p><strong>'+post.church+'</strong></p>'+ 
     '<p>Description: <strong>'+post.des+'</strong></p>'+ 
     '<p>Base url: <em>'+post.baseurl+'</em></p>'+ 
     '<p>Tracks: <li>'+ trackInfo +'</li></p>'; 
     '<hr>'+ 
     '</div>' 

     $("#content").append(content); 
     }); 
    }); 
    }); 
</script> 

, 당신은 동일한 도메인에 연결중인 posts.php입니다 이 목록 페이지로? 나는 그럴 것이라고 생각했지만, 브라우저가 도메인 간 통신을 막을 것이라는 것을 알아야하지만 서버가 그렇지 않은 경우라면 webroot/json2php/posts.php에서 다음과 같이 파일을 만들어이 문제를 해결할 수 있습니다. : 멀리 JSON을 직접 구문 분석하려고에서

<?php 
    echo file_get_contents('http://www.ggcc.tv/json2php/posts.php'); 
?> 

Answer 2

그대로 ... json2html처럼 HTML로 JSON 변환 전문 JQuery와 템플릿 엔진을 사용합니다.

다음은 앨범 중 하나를 차지하고 트랙 목록을 렌더링하는 완전한 코드 예제입니다 (표시하려는 앨범 세부 정보에서 빼고 나머지는 쉽게 추가해야 함).

참고 중첩 트랙 링크로 트랙을 렌더링 변환 'track_transform'를 사용

{tag:'div',children:function(obj){return($.json2html(obj.tracks,track_transform));}} 

을 json2html하는 서브 호출을 사용하여 렌더링된다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script> 

<div id='list'></div> 

<script> 

//JSON that you wanted to render from your earlier post 
var json = 
[{ 
"id":"All Things Are Possible", 
"key":"All Things Are Possible", 
"doc":"All Things Are Possible", 
"album":"All Things Are Possible", 
"artwork":"http://godsgypsychristianchurch.net/music_artwork/DEFAULT_COVER2.png", 
"baseurl":"http://www.godsgypsychristianchurch.net/music", 
"church":"Atlanta GA", 
"des":"All Things Are Possible from the Atlanta GA Church, Pastor Nick White", 
"tracks":[ 
    {"name":"1 Intro", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/01%20Intro.mp3"}, 

      {"name":"2 Wo si O Drom", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/02%20Wo%20si%20O%20drom.mp3"}, 

      {"name":"3 Nas Murrgo Shov", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/03%20Nas%20murrgo%20shov.mp3"}, 

      {"name":"4 To Cho Vos", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/04%20To%20cho%20vos.mp3"}, 

      {"name":"5 Tu Son Kai Sastridas", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/05%20Tu%20son%20kai%20sastridas.mp3"}, 

      {"name":"6 Now I Am Strong", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/06%20Now%20I%20am%20strong.mp3"}, 

      {"name":"7 Sorr Nevee", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/07%20Zorr%20nevee.mp3"}, 

      {"name":"8 Preaching", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/08%20Preaching.mp3"}, 

      {"name":"9 Arkadyan Amey", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/09%20Arkadyan%20amey.mp3"}, 

      {"name":"10 O Christo Ka Wudarr", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/10%20O%20Christo%20ka%20wudarr.mp3"}, 

      {"name":"11 Eloi, Eloi", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/11%20Eloi%2C%20Eloi.mp3"}, 

      {"name":"12 Amadow Dell", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/12%20Amadow%20Dell.mp3"}, 

      {"name":"13 Sastiar Amey Devla", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/13%20Sastiar%20amey%20Devla.mp3"}, 

      {"name":"14 Tu Skepeese", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/14%20Tu%20skepeese.mp3"}, 

      {"name":"15 Dov Ma Godgee", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/15%20Dov%20ma%20godgee.mp3"}, 

      {"name":"16 The Lord is my strength", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/16%20The%20Lors%20is%20my%20strength.mp3"} 
    ] 

      }]; 

//Transform used to create a link for the track 
var track_transform = {tag:'a',html:'.name',href:'.url'}; 

//Transform used to create an album 
var album_transform = 
    {tag:'div',class:'post',children:[ 
     {tag:'h1',html:'.album'}, 
     {tag:'img',src:'.artwork'}, 
     {tag:'p',children:[ 
      {tag:'span',html:'Tracks: '}, 
      {tag:'div',children:function(obj){return($.json2html(obj.tracks,track_transform));}} 
     ]} 
    ]}; 

//Render the json into a list of albums 
$('#list').json2html(json, album_transform); 
</script>