JavaScript create array of objects from html

Question

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?

"title": $(this).find(".title").text()

fdomn-m
– fdomn-m

2022-02-18 11:22:35 +00:00
Commented Feb 18, 2022 at 11:22 — fdomn-m
– fdomn-m, Commented Feb 18, 2022 at 11:22

connexo · Accepted Answer · 2022-02-18 12:03:01Z

2

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.

edited Feb 18, 2022 at 12:03

answered Feb 18, 2022 at 11:26

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roko C. Buljan · Accepted Answer · 2022-02-18 11:43:16Z

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>

Rahul Kumar · Accepted Answer · 2022-02-18 11:31:14Z

0

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>

answered Feb 18, 2022 at 11:31

Rahul Kumar

3,1572 gold badges18 silver badges23 bronze badges

1 Comment

connexo Over a year ago

This creates tight coupling between the structure of the markup and the result you get.

rookie · Accepted Answer · 2022-02-18 11:37:14Z

0

:)

var output = [];

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

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

    output.push(row);

});

answered Feb 18, 2022 at 11:37

rookie

1981 silver badge4 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

JavaScript create array of objects from html

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related