фильтровать объект JSON в таблице HTML

Question

У меня есть таблица, сгенерированная JSON из mySQL.Сейчас я пытаюсь написать кнопку фильтра, чтобы люди могли найти то, что они хотят.Один фильтр находит товар по форме (круглый, овальный и т. Д.).Форма атрибута является частью таблицы JSON, и таблица генерируется следующим образом.Переменная «фильтрованный» содержит объект json, который (идентификатор продукта, имя, тип, цвет, форма, размер) является большой таблицей данных.

var renderer = {
    text: function(data) {
        return data;
    },
    link: function(data) {
        return '<a href="' + data + '">View</a>';
    }
};

var config = [
    {attr: "Carat", renderer: renderer.text},
    {attr: "Color", renderer: renderer.text},
    {attr: "Shape", renderer: renderer.text},
    {attr: "Cut", renderer: renderer.text},
    {attr: "Symmetry", renderer: renderer.text},
    {attr: "Report", renderer: renderer.text},
    {attr: "Clarity", renderer: renderer.text},
    {attr: "Polish", renderer: renderer.text},
    {attr: "link_view", renderer: renderer.link}
];

filtered.forEach(function(data) {

    var row = document.createElement("tr");

    config.forEach(function(entry) {
        var cell = document.createElement("td"),
            value = data[entry.attr];
        cell.innerHTML = entry.renderer(value);
        row.appendChild(cell);
    });
  table.appendChild(row);    

});

Теперь у меня есть этот EventListener для захвата выбранной фигуры по id и применения к ней фильтра, чтобы вывести список строк, которые являются только этой формой.У всех строк таблицы есть класс .showMyRow, который я хочу поменять местами с .hideMyRows, который не отображает ничего.но я не могу заставить его работать: хотя я думаю, что даже если я заставлю этот код работать, он будет применять его ко всем классам, но мне нужно применять только к выбранным классам, тот, который имеет условие: if (отфильтрованный)[i] .Shape = "Princess")

shapePrincess.addEventListener('click', function(r) { 
  for (var i  =0; i<filtered.length;i++){
    if(filtered[i].Shape = "Princess"){
      var allrows = document.querySelectorAll(".showMyRow");
      allrows.classList.toggle("hideMyRow");
    // console.log(filtered[i]);

  }

// end of shapePrincess.addEventListener function
};

// end of event listener 
}, false);