使用jQuery从JSON文件中提取数据并将其分成几组

Question

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

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

我当前的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);
        };
    });
});

Answer 1

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

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

Answer 2

$.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>');
          }
      });
    });

由于过滤器的速度比forEach慢，因此强烈建议使用foreach过滤数据并将其追加到结果列表