Question

我正在煎炸我的大脑让我的网站的一个特定部分工作。

它包括单击按钮并检查它＆＃34;数据组＆＃34;属性。这应该打开另一个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（＆＃34; js / faq-content.json＆＃34;，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过滤数据并附加到结果列表

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

2 个答案: