通过位置参数将对象作为innerHtml划分为不同的html元素

Question

请您引导我找到一个优雅的解决方案，根据对象的位置属性将已排序的对象数组划分为多个HTML元素？

无需分割对象，我只需使用map函数将数据转换为HTML表示：

const htmlArray = myData.map(myObject => {
    const myObjectHtml =
        `<li>
            <h2>${myObject._title}</h2>
            <p>${myObject._text}</p>
        </li>`;
    return myObjectHtml;
});

const allInOne = htmlArray.join('');
const column = document.querySelector('#col');
column.innerHTML = allInOne;

我已经根据对象的所需位置编写了排序函数，其中

•x应该表示列号

•y确定每列中对象的顺序。

myData.sort(function compare(a, b) {
    if (a._x < b._x) return -1;
    else if (a._x > b._x) return 1;
    else {
        if (a._y < b._y) return -1;
        else return 1;
    }
});

但我想将它们 - 已经按x和y升序排序 - 基于x可能使用其他一些纯JavaScript 分为多个列优雅的功能。

谢谢。

编辑：只是为了清理 - 我能够通过列号（x）的所需属性对对象进行排序，并使用map函数迭代 - 通过整个数组并将每个对象映射到其HTML表示，但是如何通过x将其有效地分组？我的目标是使列只包含匹配数据对象的HTML。

我希望，有一种方法可以将它映射到HTML并分成不同的HTML块。否则我想我可能需要通过for循环将数组分成不同的HTML块。