JavaScript create array of objects from html-CodePudding

I have some HTML like this..

<div >
    <div >Product 1</div>
    <div >34</div>
    <div >Red</div>
</div>
<div >
    <div >Product 2</div>
    <div >3</div>
    <div >Green</div>
</div>
<div >
    <div >Product 4</div>
    <div >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?

CodePudding user response：

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 >
  <div >Product 1</div>
  <div >34</div>
  <div >Red</div>
</div>
<div >
  <div >Product 2</div>
  <div >3</div>
  <div >Green</div>
</div>
<div >
  <div >Product 4</div>
  <div >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.

CodePudding user response：

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 >
  <div >Product 1</div>
  <div >34</div>
  <div >Red</div>
</div>
<div >
  <div >Product 2</div>
  <div >3</div>
  <div >Green</div>
</div>
<div >
  <div >Product 4</div>
  <div >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 >
  <div >Product 1</div>
  <div >34</div>
  <div >Red</div>
</div>
<div >
  <div >Product 2</div>
  <div >3</div>
  <div >Green</div>
</div>
<div >
  <div >Product 4</div>
  <div >Yellow</div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CodePudding user response：

Use children property on div element of class item and get the text value of div items like title, price, color etc. using Node.textContent property.

var finalList = [];

$('.item').each((i, obj) => {
    const [title, price, color] = obj.children;
    let row = {
      title: title?.textContent ?? "",
      price: price?.textContent ?? "",
      color: color?.textContent ?? ""
    }
    finalList.push(row);
});
console.log(finalList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div >Product 1</div>
    <div >34</div>
    <div >Red</div>
</div>
<div >
    <div >Product 2</div>
    <div >3</div>
    <div >Green</div>
</div>
<div >
    <div >Product 4</div>
    <div >Yellow</div>
</div>

CodePudding user response：

var output = [];

$('.item').each(function(i, obj) {

    let row = {
        "title": $('.title', obj).text() || "",
        "price": $('.price', obj).text() || "",
        "color": $('.color', obj).text() || ""
    }

    output.push(row);

});