CODEWITHSUNDEEP
javascriptjquery
fightstarr20
fightstarr20

Reputation: 12588

JavaScript create array of objects from html

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?

Upvotes: 1

Views: 47

Answers (4)

connexo
connexo

Reputation: 56754

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.

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

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>

Upvotes: 1

rookie
rookie

Reputation: 218

:)

var output = [];

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

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

    output.push(row);

});

Upvotes: 0

Rahul Kumar
Rahul Kumar

Reputation: 3157

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 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>

Upvotes: 0

Related Questions