Javascript 使用jQuery从JSON文件中提取数据并将其拆分为组

我目前正在绞尽脑汁让我的网站的一个特定部分正常工作

它包括单击按钮并检查其“数据组”属性。这将打开另一个div，并使用从本地JSON文件中提取的内容填充它，我必须根据每个按钮的数据组属性进行过滤

我当前的JSON如下所示：

 [
{
    "group": "editing",
    "question": "How does Editing work?",
    "answer": "Editing Editing Editing Editing Editing Editing works just fine is pretty cool to see it working hey this is just placeholder text to check whether it is working or not."
},
{
    "group": "distribution",
    "question": "How does Distribution work?",
    "answer": "Distribution Distribution Distribution Distribution Distribution Distribution works just fine is pretty cool to see it working hey this is just placeholder text to check whether it is working or not."
},
{
    "group": "setup",
    "question": "How does Setup work?",
    "answer": "Setup Setup Setup Setup Setup Setup Setup works just fine is pretty cool to see it working hey this is just placeholder text to check whether it is working or not."
},
{
    "group": "profiles",
    "question": "How do Profiles work?",
    "answer": "Profiles Profiles Profiles Profiles Profiles Profiles Profiles Profiles works just fine is pretty cool to see it working hey this is just placeholder text to check whether it is working or not."
},
{
    "group": "payment",
    "question": "How does Payment work?",
    "answer": "Payment Payment Payment Payment Payment Payment Payment Payment Payment works just fine is pretty cool to see it working hey this is just placeholder text to check whether it is working or not."
}
{
    "group": "about",
    "question": "How does Payment work?",
    "answer": "Payment Payment Payment Payment Payment Payment Payment Payment Payment works just fine is pretty cool to see it working hey this is just placeholder text to check whether it is working or not."
}

]

我的Javascript如下所示：

$('.groupBtn').on('click', function(data){
    data.preventDefault();

    var $root = $('html, body');
    $root.animate({
        scrollTop: $('.angle').offset().top
    }, 500);

    var attributeId = $(this).data('group');

    if ($(this).attr('group') == attributeId) {

    } else {
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');

        $.getJSON("js/faq-content.json", function() {


        })
        .done(function(data){

            $.each(data.questions, function(i, question){
                console.log(question);
                $('.resultsList.open').append('<article class="result"><div class="question"><p>'+ question.question +'</p><div class="plus"></div></div>');
            });
        });
    }

    $('.resultsList').each(function(){

        $(this).hide();
        var selectedAttribute = $('.selected').data('group');

        if ($(this).data('group') == selectedAttribute) {
            $(this).fadeIn(200);
        };
    });
});

$（'.groupBtn'）。在（'click'，函数（数据）{
data.preventDefault（）；
var$root=$（'html，body'）；
$root.animate({
scrollTop:$（'.angle'）.offset（）.top
}, 500);
var attributeId=$（this.data（'group'）；
if（$（this.attr（'group'）==attributeId）{
}否则{
$（this.sides（）.removeClass（'selected'）；
$（this.addClass（'selected'）；
$.getJSON（“js/faq content.json”，function（））{
})
.完成（功能（数据）{
$.each（数据、问题、函数（i、问题）{
控制台日志（问题）；
$（'.resultsList.open'）.append（''+question.question+'
'）；
});
});
}
$（'.resultsList'）。每个（函数（）{
$（this.hide（）；
变量selectedAttribute=$（'.selected'）。数据（'group'）；
if（$（this）.data（'group'）==selectedAttribute）{
美元（本）.fadeIn（200）；
};
});
});

$.getJSON（“js/faq content.json”，function（））{

}）
.完成（功能（数据）{
var groupQuestions=data.questions.filter（data=>data.group==attributeId）；
$.each（分组问题，函数（i，问题）{
控制台日志（问题）；
$（'.resultsList.open'）.append（''+question.question+'
'）；
});
});

$.getJSON（“js/faq content.json”，function（）{}）
.完成（功能（数据）{
data.questions.forEach（问题=>{
if（question.group==attributeId）{
$（'.resultsList.open'）.append（''+question.question+'
'）；
}
});
});

---

由于筛选速度比forEach慢，因此强烈建议使用forEach筛选数据并附加到resultslist

请共享一些标记或Fiddle您只需执行此操作即可

var groupQuestions=data.questions.filter（v=>v.group==attributeId）

，然后在结果中循环添加问题

$。每个问题（groupQuestions，…

）。

    })
    .done(function(data){
      var groupQuestions = data.questions.filter(data => data.group == attributeId);
        $.each(groupQuestions, function(i, question){
            console.log(question);
            $('.resultsList.open').append('<article class="result"><div class="question"><p>'+ question.question +'</p><div class="plus"></div></div>');
        });
    });

$.getJSON("js/faq-content.json", function() {})
    .done(function(data){
      data.questions.forEach(question => {
          if(question.group === attributeId){
            $('.resultsList.open').append('<article class="result"><div class="question"><p>'+ question.question +'</p><div class="plus"></div></div>');
          }
      });
    });