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会被直接解析成我网站上的实时提要，通过orderid或购买日期，通过3种相同函数的api调用（取决于参数来识别每个操作）进行排序：

1. 初始加载（5 个条目）和加载更多按钮（每次 +5）

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

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

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

3. 当订单已经在实时提要中但状态发生变化时，websocket 会更新

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

我遇到的问题是如何将 html div 转换为按引用进行显示和分组，如下所示。

<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 以及使用 wrapAll 和类似的 jquery 东西来修改已经从 ajax 调用返回但没有运气的 html。单击任一订单以更改其状态时，还有进一步的 ajax 操作。对于具有相同参考的所有订单，我需要在组级别上相同。对不起，如果我没有解释清楚。

Answer 1

此solution 循环现有条目并按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);