使用jQuery從JSON文件中提取數據並將其拆分成組

我目前在煎炸我的大腦以獲取我網站的一個特定部分。使用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); 
     }; 
    }); 
});

來源

2017-05-16 Arthur Finkler

請分享一些標記或小提琴 –

你可以簡單的做到這一點'VAR groupQuestions = data.questions .filter（v => v.group == attributeId）'然後遍歷結果來添加問題'$ .each（groupQuestions，.....'。 – Titus

$ .getJSON（「JS/FAQ-content.json」功能（）{

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

來源

2017-05-16 05:17:12

$.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其對數據進行過濾，並追加到resultslist

來源

2017-05-16 05:35:43 Shreedhar

使用jQuery從JSON文件中提取數據並將其拆分成組

回答

相關問題