let items = [
{
name: "Luis",
price: 15
},
{
name: "Amore",
price: 100
}
];
var elDiv = {
name: 'div'
}
var elUl = {
name: 'ul'
}
var elLi = {
name: 'li'
}
var elP = {
name: 'p'
}
function domFunctor(opciones, innerhtml){
let dom = document.createElement(this.name);
dom.className = opciones.className ? opciones.className : "";
if (innerhtml.length) {
innerhtml.map(item => dom.appendChild(item));
}else{
if (innerhtml.nodeType != Node.ELEMENT_NODE) {
dom.innerHTML = innerhtml;
}else{
dom.appendChild(dom.innerHTML);
}
}
return dom;
}
var div = domFunctor.bind(elDiv);
var ul = domFunctor.bind(elUl);
var li = domFunctor.bind(elLi);
var p = domFunctor.bind(elP);
function renderList(renderItem,items)
{
return div(
{ className: 'list-container'},
items.length
? ul('',items.map(renderItem))
: p('','No items found')
);
}
function formatCurrency(params) {
return params;
}
const renderPriceItem = item => li('',formatCurrency(item.price));
const renderCustomerItem = item => li('',item.name);
renderPriceList = renderList.bind(null, renderPriceItem);
// renderCustomerItem = renderList.bind(null, renderCustomerItem);
(function () {
let salida = renderPriceList(items);
document.getElementById('container').innerHTML = salida;
})();
Returns error, and I do not know how to solve it, I know I could use other libraries and the joke is to do it with vanilla. Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
Here is the example of how it should look as ordered by the function renderList
<div class="list-container">
<!-- DEPENDE SI LA LISTA TIENE DATOS: -->
<ul>
<!-- Depende del Tipo de Dato que se esté mostrando -->
<li> dato 1</li>
<li> dato 2</li>
...
<li> dato n</li>
</ul>
<!-- Si la lista no tiene datos -->
<p>No items found</p>
</div>
Important Note: I know it can be done very easily, otherwise, I need the DOM Objects to be created dynamically, and they can also be nested: For example: div ({className: "container"}, div ({className: "green background"}, ul ("", ...)));
if they know of any other method without using external libraries like Jquery, etc. I appreciate so much.
The Purpose of this exercise is purely educational.