I have some HTML like this..
<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>
I am trying to create an array of objects in JavaScript / jQuery like this..
var output = [];
$('.item').each(function(i, obj) {
let row = {
"title": "title",
"price": "price",
"color": "color"
}
output.push(row);
});
In my example I don't know how to get the title price and color, also how can I set an empty value if they do not exist in my original HTML?
Using vanilla 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>Q: how can I set an empty value if they do not exist in my original HTML?
A: This is achieved using the ?? (nullish coalescing) operator, which returns the right side of the expression if the left side is either undefined or null.
You don't need 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>With 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);
});