JSONオブジェクトをループして、HTMLを使用して出力しようとしています

Question

this JSONデータをループして、次のようなアコーディオンにデータを出力しようとしています： http://alexthorpe.com/wp-content/uploads/2012/01/accordion_with_css.jpgしかし、

これは私がこれまで持っているものです。
HTML：

<div class="accordion"> 
      <div class="slide"> 
       <h3></h3> 
       <div class="accordion-info"> 
       </div> 
      </div> 
</div> 

JS：

$(document).ready(function() { 
    $('div.accordion-info').hide(); 
    $('.slide > h3').click(function() { 
     $(this).next().slideToggle('fast'); 
     $(this).toggleClass('active'); 
    }); 
}); 

$(document).ready(function() { 
    $.getJSON('http://design.propcom.co.uk/buildtest/accordion-data.json', function(data) { 
     $.each(data, function(index) { 
      console.log(data); 
     }); 
    }); 

}); 

これはcodepenです。ここで

Answer 1

私は別のサーバーからデータを呼び出す避けたかったので、ここにデータをコピーして、これはそれが

var jsonData = 
 
{ 
 
\t "blocks": [ 
 
\t \t { 
 
\t \t \t "heading": "Section 1", 
 
\t \t \t "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis!" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "heading": "Section 2", 
 
\t \t \t "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque!" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "heading": "Section 3", 
 
\t \t \t "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
 
\t \t } 
 
\t ] 
 
}; 
 
var json = jsonData.blocks; 
 
    for (var key in json) { 
 
     if (json.hasOwnProperty(key)) { 
 
      console.log(json[key].heading); 
 
      console.log(json[key].content); 
 
     } 
 
    } 
 
    
 

Answer 2

をループする方法であるHTMLコード

私がしますテンプレート形式を使用すると、子要素の追加や削除が容易になります

<!-- Display Accordion --> 
<div> 
    <h1>Jquery Accordion</h1> 
    <div class="accordion"></div> 
</div> 
<!-- Template for each slide item --> 
<div rel="template"> 
    <div class="block"> 
     <h3 class="heading"></h3> 
     <div class="content"></div> 
    </div> 
</div> 

スクリプト

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
$(function() { 
    $.getJSON('http://design.propcom.co.uk/buildtest/accordion-data.json', function(data) { 
     // To empty the existing item 
     // $('.accordion').empty(); 

     // Iterate block 
     $.each(data.blocks, function(k, v) { 
      // Make use of jquery clone 
      var new_block = $('[rel=template]').find('.block').clone(); 
      new_block.find(".heading").html(v['heading']); 
      new_block.find(".content").html(v['content']); 

      // Append the each item 
      $('.accordion').append(new_block) 
     }); 
    }); 

});