使用Javascript浏览器Fetch API将数据提取到选项卡部分

想从我遇到的一个小问题中得到一些帮助。

使用无头CMS获取数据。 绿色是按钮/链接,将向下滚动到相应的部分/类别。

如果类别发生变化,则应该将category元素添加到DOM中,并使用相应的名称后跟属于该类别的所有项。

我试过的

let data = results.map( (item, iterator, theArray) => {
   let insertToHTML;

   if(item.category !== theArray[i -1 ].category) {
    insertToHTML = `<div class="category-name"> ${item.category} </div>`
   }
   return insertToHTML;
  })

document.querySelector("#product-container").innerHTML = data;

我肯定还有其他的方法。但我还不熟悉这种模式

我想到的另一个选择是对每个部分有多个ajax/fetch请求,这些部分的html是硬编码的,但是这个页面不会是100%动态的。。。不好的。

感谢您的意见