I'm getting following data inside php loop
<ul id="alpha-list">
<li data-alpha="A">Apple</li>
<li data-alpha="B">Bat</li>
<li data-alpha="B">Ball</li>
<li data-alpha="A">Angel</li>
<li data-alpha="D">Dog</li>
<li data-alpha="C">Cat</li>
</ul>
I want to find unique "data-alpha" attribute & wrap them inside parent "ul li" so that result should look similar to this for each "data-alpha".
<ul id="alpha-list">
<li data-alphabet="A">
<ul>
<li data-alpha="A">Angel</li>
<li data-alpha="A">Apple</li>
</ul>
</li>
<li data-alphabet="B">
<ul>
<li data-alpha="B">Ball</li>
<li data-alpha="B">Bat</li>
</ul>
</li>
.....
</ul>
How to achieve this within php ? Any guidance will be appreciated.
$html = <<<EOL
<ul id="alpha-list">
<li data-alpha="A">Apple</li>
<li data-alpha="B">Bat</li>
<li data-alpha="B">Ball</li>
<li data-alpha="A">Angel</li>
<li data-alpha="D">Dog</li>
<li data-alpha="C">Cat</li>
</ul>
EOL;
$dom = new DOMDocument();
$dom->loadHTML($html);
$data = array();
foreach ($dom->getElementsByTagName('li') as $node) {
$data[$node->getAttribute('data-alpha')][] = $node->textContent;
}
ksort($data);
$dom = new DOMDocument();
$ulElement = $dom->createElement('ul');
$ulElement->setAttribute('id', 'alpha-list');
foreach ($data as $char => $words) {
$parentLiElement = $dom->createElement('li');
$parentLiElement->setAttribute('data-alphabet', $char);
$childUlElement = $dom->createElement('ul');
foreach ($words as $word) {
$childLiElement = $dom->createElement('li');
$childLiElement->setAttribute('data-alpha', $char);
$childLiElement->appendChild($dom->createTextNode($word));
$childUlElement->appendChild($childLiElement);
}
$parentLiElement->appendChild($childUlElement);
$ulElement->appendChild($parentLiElement);
}
$dom->appendChild($ulElement);
echo $dom->saveHTML();
This should yield:
<ul id="alpha-list">
<li data-alphabet="A">
<ul>
<li data-alpha="A">Apple</li>
<li data-alpha="A">Angel</li>
</ul>
</li>
<li data-alphabet="B">
<ul>
<li data-alpha="B">Bat</li>
<li data-alpha="B">Ball</li>
</ul>
</li>
<li data-alphabet="C">
<ul>
<li data-alpha="C">Cat</li>
</ul>
</li>
<li data-alphabet="D">
<ul>
<li data-alpha="D">Dog</li>
</ul>
</li>
</ul>
I think you need to create double dimensional array and then loop the array