Tengo algo de HTML como este ..
<div class="item"> <div class="title">Product 1</div> <div class="price">34</div> <div class="color">Red</div> </div> <div class="item"> <div class="title">Product 2</div> <div class="price">3</div> <div class="color">Green</div> </div> <div class="item"> <div class="title">Product 4</div> <div class="color">Yellow</div> </div>Estoy tratando de crear una matriz de objetos en JavaScript / jQuery como este ...
var output = []; $('.item').each(function(i, obj) { let row = { "title": "title", "price": "price", "color": "color" } output.push(row); }); En mi ejemplo, no sé cómo obtener el price y color del title , además, ¿cómo puedo establecer un valor vacío si no existen en mi HTML original?
Usando vainilla JS:
const products = Array.from(document.querySelectorAll('.item')).map(item => ({ title: item.querySelector('.title')?.textContent ?? '', price: item.querySelector('.price')?.textContent ?? '', color: item.querySelector('.color')?.textContent ?? '', })); console.log(products); <div class="item"> <div class="title">Product 1</div> <div class="price">34</div> <div class="color">Red</div> </div> <div class="item"> <div class="title">Product 2</div> <div class="price">3</div> <div class="color">Green</div> </div> <div class="item"> <div class="title">Product 4</div> <div class="color">Yellow</div> </div>P : ¿Cómo puedo establecer un valor vacío si no existen en mi HTML original?
R : Esto se logra usando el ?? (unión nula), que devuelve el lado derecho de la expresión si el lado izquierdo es undefined o null .
No necesitas jQuery
const ELS = (sel, par) => (par || document).querySelectorAll(sel); const EL = (sel, par) => (par || document).querySelector(sel); const output = [...ELS(".item")].map(el => ({ title: EL(".title", el)?.textContent || "", price: EL(".price", el)?.textContent || "", color: EL(".color", el)?.textContent || "", })); console.log(output); <div class="item"> <div class="title">Product 1</div> <div class="price">34</div> <div class="color">Red</div> </div> <div class="item"> <div class="title">Product 2</div> <div class="price">3</div> <div class="color">Green</div> </div> <div class="item"> <div class="title">Product 4</div> <div class="color">Yellow</div> </div>Con jQuery:
const output = $(".item").get().map(el => ({ "title": $(".title", el).text(), "price": $(".price", el).text(), "color": $(".color", el).text(), })); console.log(output); <div class="item"> <div class="title">Product 1</div> <div class="price">34</div> <div class="color">Red</div> </div> <div class="item"> <div class="title">Product 2</div> <div class="price">3</div> <div class="color">Green</div> </div> <div class="item"> <div class="title">Product 4</div> <div class="color">Yellow</div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>:)
var output = []; $('.item').each(function(i, obj) { let row = { "title": $('.title', obj).text() || "", "price": $('.price', obj).text() || "", "color": $('.color', obj).text() || "" } output.push(row); });