jQuery reorder and structure Ajax data-CodePudding

I have two dimensions of data, one is the purchase itself and the second is the referral reference. Orders are produced with PDO and taken from a MySQL database:

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

Using ajax the above html would be parsed directly into a live feed on my website, sorted desc by orderid or date purchased, through 3 types of api calls of the same function (depending on the parameters to identify each operation):

initial load (5 entries) & load more button ( 5 each time)
```
$(".wrapper").append(html);  
```
websocket ping which only triggers the same api call and retrieval from mysql (returning just one order - live feed)
```
$(".wrapper").prepend(html); 
```
websocket update when the order is already on the live feed but the status changes
```
$("#"   orderid).replaceWith(html);
```

The problem I have is how to convert the html divs to display and group it per reference as below.

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

I tried all sort of things, like rewriting the source php html, rewriting the sql query to use group_concat as well as using wrapAll and similar jquery stuff to modify the html after it already comes back from ajax call but no luck. There is further ajax action when clicking on either the order to change the status of it. I need the same on the group level for all the orders having the same reference. Sorry if I did not explain it well.

CodePudding user response：

This solution loops the existing entries and groups them by the data-rfrnc property:

const people = {};

const html = `<div data-rfrnc="joe" id="1" ><div>1 Laptop $220</div><div >10.25</div></div>
<div data-rfrnc="bill" id="2" ><div>1 Phone $520</div><div >10.10</div></div>
<div data-rfrnc="joe" id="3" ><div>1 Headset $220</div><div >9.20</div></div>
<div data-rfrnc="bill" id="4" ><div>1 Laptop $220</div><div >9.02</div></div>
<div data-rfrnc="joe" id="5" ><div>1 Laptop $220</div><div >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)