How to fix code PHP DOM HTML Parse - Loop - php

Question

I started to play building a PHP HTML Parser,
and I have some trouble:
The HTML code is as follows:
<div class="list">
<div class="b">
<div class="c">
<a href="http://link.com">
<div class="d">Category</div>
<div class="e">
<img src="https://link.com/img.png">
</div>
<h1>TITLE</h1>
<div class="f">paragraph 1</div>
<div class="g">paragraph 2</div>
<div class="h">
<div class="i">
<div class="j">Quot</div>
</div>
</div>
</a>
</div>
</div>
<div class="b">
<div class="c">
<a href="http://link2.com">
<div class="d">Category2</div>
<div class="e">
<img src="https://link2.com/img.png">
</div>
<h1>TITLE 2</h1>
<div class="f">paragraph 12</div>
<div class="g">paragraph 22</div>
<div class="h">
<div class="i">
<div class="j">Quot 2</div>
</div>
</div>
</a>
</div>
</div>
My PHP Code:
$classname = "list";
$xPath = new DomXPath($dom);
$find = $xPath->query("//*
[contains(#class, '$classname')]");
$get = $find->item(0);
$link = $get->getElementsByTagName('a');
$data = array();
foreach ($link as $val)
{ $data[] = array(
'link' => $link->item($no)
->getAttribute('href'),
);
$no++;
}
I want the results like this:
-http://link.com
-category
-http://link.com/img.png
-paragraph 1
-paragraph 2
-quot
-http://link2.com
-category2
-http://link2.com/img.png
-paragraph 12
-paragraph 22
-quot2

Answer 1

Here is how you could do it using jQuery and Mustache js a templating tool.
https://jsfiddle.net/mcroteau/zyouxfq4/
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="Mustache.js"></script>
<script type="text/javascript">
var row = `
<div class="content-row">
<div class="link">
{{link}}
</div>
<h1>{{category}}</h1>
<img src="{{image}}" style="border:solid 1px #ddd; height:20px; width:20px;"/><br/>
<p>{{paragraphOne}}</p>
<p>{{paragraphTwo}}</p>
<p>{{quote}}</p>
</div>
<hr/>`;
$(document).ready(function(){
var $mainContentDiv = $(".list")
var $mainList = $(".b");
$mainList.each(function(){
var data = {}
var content = $(this).find(".c")
var $content = $(content)
var link = getLink($content)
var category = getCategory($content)
var image = getImage($content)
var paragraphOne = getParagraph($content, 'f')
var paragraphTwo = getParagraph($content, 'g')
var quote = getQuote($content)
data["link"] = link
data["category"] = category
data["image"] = image
data["paragraphOne"] = paragraphOne
data["paragraphTwo"] = paragraphTwo
data["quote"] = quote
var html = Mustache.to_html(row, data);
$('#links-container').append(html);
})
function getQuote($content){
return $content.find(".j").html()
}
function getParagraph($content, className){
return $content.find("." + className).html()
}
function getImage($content){
return $content.find("e").find("img").attr("src")
}
function getCategory($content){
var category = $content.find(".d")
return $(category).html()
}
function getLink($content){
return $content.find("a").attr("href")
}
$mainContentDiv.remove()
})
</script>
Is this something like you wanted to achieve?