从 URL 获取 JSON，然后使用 Javascript 在手风琴中显示结果答案

【问题标题】：Getting JSON from URL and then display results in accordion using Javascript从 URL 获取 JSON，然后使用 Javascript 在手风琴中显示结果
【发布时间】：2018-04-04 19:56:09
【问题描述】：

我创建了一个手风琴，我想通过此链接使用 JSON 填充它：http://design.propcom.co.uk/buildtest/accordion-data.json

这是我的html：

    <div class="accordion js-accordion">
        <div class="accordion__item js-accordion-item active">
            <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body" >
                <div class="accordion-body__contents" ></div>
            </div><!-- end of accordion body -->
        </div><!-- end of accordion item -->

    <div class="accordion__item js-accordion-item ">
        <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents"></div>
            </div>
        </div>

    <div class="accordion__item js-accordion-item">
        <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents"></div>
            </div>
        </div>
    </div><!-- end of accordion -->

我正在尝试使用 JSON 文件中的“标题”数据填充 accordion-header js-accordion-header div，并使用“内容”填充 accordion-body__contents "数据。

这是我对 Javascript 部分的了解：

$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',   
type: 'GET',
dataType: 'JSON',
success: function (data) {
   $.each(data.blocks, function(index, element) {
   $(".accordion-header").append("<div>" + element.heading + "</div>");
   $(".accordion-body__contents").append("<div>" + element.content + "</div>");
    });
}

});

任何帮助都将不胜感激，因为我觉得我目前的努力已经碰壁了。

【问题讨论】：

您收到数据了吗？在 AJAX 内部？
删除：jsonCallback: 'callback',.
那么您的 HTML 中有一个元素 <js-accordion-header> 吗？您的选择器正在寻找一个带有accordion-header 类的元素，并在该元素内部寻找一个带有 js-accordion-header 标记的元素。
如果我在控制台中显示数据，我可以看到它，但我无法让它显示在 html 中。我已经修改了选择器和
标签显示，但里面没有显示数据。

标签： javascript jquery json

【解决方案1】：

这里有几个问题：

我们在处理 AJAX 结果时有点偏离
- 使用data.blocks 属性，而循环使用element 变量。
正如@Danny 建议的那样，我们有额外的 AJAX 属性
- 删除callback 和data 属性。
最后你的 html 似乎过于复杂
- 从您的演示站点查看 css 后，我能够将其包含在内并删除 JQueryUI 思想。现在请务必附加整个 accordion__item 元素。

解决了这些问题后，它应该看起来像这样：

$.ajax({
  url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
  type: 'GET',
  dataType: 'JSON',
  success: function (data) {
    $.each(data.blocks, function(index, element) {
      $(".accordion")
        .append(`<div class="accordion__item js-accordion-item ">
          <div class="accordion-header js-accordion-header">${element.heading}</div> 
              <div class="accordion-body js-accordion-body">
                  <div class="accordion-body__contents">${element.content}</div>
              </div>
          </div>`);
    });
    
    var accordion = (function(){
      var $accordion = $('.js-accordion');
      var $accordion_header = $accordion.find('.js-accordion-header');
      var $accordion_item = $('.js-accordion-item');

      // default settings 
      var settings = {
        // animation speed
        speed: 400,

        // close all other accordion items if true
        oneOpen: false
      };

      return {
        // pass configurable object literal
        init: function($settings) {
          $accordion_header.on('click', function() {
            accordion.toggle($(this));
          });

          $.extend(settings, $settings); 

          // ensure only one accordion is active if oneOpen is true
          if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
            $('.js-accordion-item.active:not(:first)').removeClass('active');
          }

          // reveal the active accordion bodies
          $('.js-accordion-item.active').find('> .js-accordion-body').show();
        },
        toggle: function($this) {

          if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
            $this.closest('.js-accordion')
                   .find('> .js-accordion-item') 
                   .removeClass('active')
                   .find('.js-accordion-body')
                   .slideUp()
          }

          // show/hide the clicked accordion item
          $this.closest('.js-accordion-item').toggleClass('active');
          $this.next().stop().slideToggle(settings.speed);
        }
      }
    })();

    $(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
  }
});

body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}/* CSS Document */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="accordion js-accordion">
</div>

浏览完您的演示后，我已将您的 CSS 包含到我的示例中。

【讨论】：

我目前只使用 min.js。 HTML 似乎过于复杂，但我需要这些标签来使用 jquery 对其进行动画处理。这是我的代码的实时版本的链接vynl.space/Projects/accord
我已经设法展示了一些东西，但它说的是未定义。我已经编辑了顶部的代码，所以你可以看到我做了什么。谢谢你的帮助。
这是一个很好的第一步，用你现在的答案更新你的答案。我会用你的 css 调整答案。
好的更新，请务必参考我的第一点并将$.each(data, function(index, element) {更改为$.each(data.blocks, function(index, element) {，因为您的数据中首先有一个blocks属性。
谢谢你，菲利普。唯一的问题是所有数据都显示在每个元素中，例如每个头部都显示“第 1 节第 2 节第 3 节”。你知道我如何让每条数据显示在自己的 div 中吗？

标签显示，但里面没有显示数据。