jQuery对Ajax数据进行重新排序和结构化

Question

我有两个维度的数据，一个是购买本身，另一个是推荐参考。订单是用PDO生成的，并从MySQL数据库中获取：

<div rfrnc="joe" id="1" class="order"><div>1 Laptop $220</div><div class="time">10.25</div></div>
<div rfrnc="bill" id="2" class="order"><div>1 Phone $520</div><div class="time">10.10</div></div>
<div rfrnc="joe" id="3" class="order"><div>1 Headset $220</div><div class="time">9.20</div></div>
<div rfrnc="bill" id="4" class="order"><div>1 Laptop $220</div><div class="time">9.02</div></div>
<div rfrnc="joe" id="5" class="order"><div>1 Laptop $220</div><div class="time">11.02</div></div>

使用ajax，上面的html将直接解析为我网站上的实时提要，按订单ID或购买日期进行desc排序，通过同一函数的3种类型的api调用(取决于识别每个操作的参数(：

1. 初始加载(5个条目(&加载更多按钮(每次+5(

   $(".wrapper").append(html);  
   

2. websocket ping，它只触发相同的api调用和从mysql检索(只返回一个订单-实时提要(

   $(".wrapper").prepend(html); 
   

3. 当订单已经在实时订阅源上，但状态更改时，websocket会更新

   $("#" + orderid).replaceWith(html);
   

我遇到的问题是如何将htmldiv转换为显示并按引用分组，如下所示。

<div rfrnc="joe">
<div id="5" class="order">...</div>
<div id="3" class="order">...</div>
<div id="1" class="order">...</div>
</div>
<div rfrnc="bill">
<div id="4" class="order">...</div>
<div id="2" class="order">...</div>
</div>

我尝试了所有的事情，比如重写源php-html，重写sql查询以使用group_concat，以及在html从ajax调用返回后使用wrapAll和类似的jquery来修改html，但没有成功。当点击任意一个订单以更改其状态时，都会有进一步的ajax操作。我需要在组级别上对具有相同引用的所有订单执行相同的操作。如果我没有好好解释，我很抱歉。

Answer 1

此解决方案循环现有条目，并按data-rfrnc属性对其进行分组：

const people = {};
const html = `<div data-rfrnc="joe" id="1" class="order"><div>1 Laptop $220</div><div class="time">10.25</div></div>
<div data-rfrnc="bill" id="2" class="order"><div>1 Phone $520</div><div class="time">10.10</div></div>
<div data-rfrnc="joe" id="3" class="order"><div>1 Headset $220</div><div class="time">9.20</div></div>
<div data-rfrnc="bill" id="4" class="order"><div>1 Laptop $220</div><div class="time">9.02</div></div>
<div data-rfrnc="joe" id="5" class="order"><div>1 Laptop $220</div><div class="time">11.02</div></div>
`
const domParser = new DOMParser();
const doc = domParser.parseFromString(html, "text/html")

Array.from(doc.querySelectorAll('body > div')).forEach(div => {
const person = div.getAttribute('data-rfrnc');
if (!people[person]) {
people[person] = [];
}
people[person].push(div)
})

const docFrag = document.createDocumentFragment();
for(let [person, elements] of Object.entries(people)) {
const personElement = document.createElement('div');
personElement.setAttribute('data-rfrnc', person);
elements
.sort((a,b) => a.getAttribute('id') < b.getAttribute('id'))
.forEach(element => personElement.appendChild(element));
docFrag.appendChild(personElement);
}
document.body.appendChild(docFrag)

Answer 2

我完全支持@firstlast的评论，即发送JSON数据并在前端处理它将是更好的解决方案。

为了防止任何人对它感兴趣，这里有另一种将接收到的html字符串转换回JavaScript数组的方法：

const html=`<div rfrnc="joe" id="1" class="order"><div>1 Laptop $220</div><div class="time">10.25</div></div>
<div rfrnc="bill" id="2" class="order"><div>1 Phone $520</div><div class="time">10.10</div></div>
<div rfrnc="joe" id="3" class="order"><div>1 Headset $220</div><div class="time">9.20</div></div>
<div rfrnc="bill" id="4" class="order"><div>1 Laptop $220</div><div class="time">9.02</div></div>
<div rfrnc="joe" id="5" class="order"><div>1 Laptop $220</div><div class="time">11.02</div></div>`;
const dom=document.createElement("div");
dom.innerHTML=html

const data=[...dom.children].map(d=>[d.id,d.getAttribute("rfrnc")].concat([...d.children].flatMap(c=>c.textContent.split(" ")))
);
// show the result:
console.log(["id","rfrnc","qty","descr","price","time"]);
console.log(data);