尝试遍历 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

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)
        });
    });

});

Answer 2

因为我想避免从不同的服务器调用数据，所以将数据复制到这里，这就是它的循环方式

var jsonData = 
{
	"blocks": [
		{
			"heading": "Section 1",
			"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!"
		},
		{
			"heading": "Section 2",
			"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!"
		},
		{
			"heading": "Section 3",
			"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
		}
	]
};
var json = jsonData.blocks;
  for (var key in json) {
       if (json.hasOwnProperty(key)) {
          console.log(json[key].heading);
          console.log(json[key].content);
       }
    }