Estoy usando vainilla javascript para analizar los atributos de datos HTML y después de eso, necesito analizar una lista diferente en un formato diferente. ¿Cómo puedo analizarlos como una lista de arreglos con todos los productos?
HTML
<div> <img src="img1.jpg" /> <div class="description">Lagavulin 16 Year Old</div> <button class="add-to-cart" data-product-id="1" data-product-title="Lagavulin 16 Year Old" data-category="Scotch"> Add To Cart </button> </div> <div> <img src="img2.jpg" /> <div class="description">Ardbeg</div> <button class="add-to-cart" data-product-id="10" data-product-title="Ardbeg" data-category="Scotch"> Add To Cart </button> </div> </div>JS:
Array.from( document.getElementById("main-menu") .getElementsByTagName("li") ).forEach((x) => (x.onclick = () => console.log({ event_name: "menu item clicked", menu_item: x.innerText, })) );Espero crear una matriz con todos los productos que se verían así
“name”: <str>, mandatory “id”: <int>, mandatory “price”: <float>, mandatory “brand”: <str>, optional “list”: <str>, optional “position”: <int>, optionalPuede extraer la información del HTML como se muestra en el siguiente código, pero no entiendo de dónde espera obtener brand y la position , ya que no hay tal información en el HTML.
var itemsElems = document.querySelectorAll('.add-to-cart'); var result = [...itemsElems].reduce((acc, elm) => { var {productId: id, productTitle: name, category} = elm.dataset || {}; acc.push({ id: +id, // cast to number name, category, }) return acc }, []); console.log(result) <div> <img src="img1.jpg" /> <div class="description">Lagavulin 16 Year Old</div> <button class="add-to-cart" data-product-id="1" data-product-title="Lagavulin 16 Year Old" data-category="Scotch"> Add To Cart </button> </div> <div> <img src="img2.jpg" /> <div class="description">Ardbeg</div> <button class="add-to-cart" data-product-id="10" data-product-title="Ardbeg" data-category="Scotch"> Add To Cart </button> </div>