JavaScript從html創建物件陣列

我有一些這樣的HTML..

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

我正在嘗試像這樣在 JavaScript / jQuery 中創建一個物件陣列。

var output = [];

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

    let row = {
        "title": "title",
        "price": "price",
        "color": "color"
    }

    output.push(row);

});

在我的示例中，我不知道如何獲取title priceand color，如果原始 HTML 中不存在它們，我該如何設定空值？

uj5u.com熱心網友回復：

使用香草 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>

問：如果它們在我的原始 HTML 中不存在，我如何設定一個空值？

答：這是使用??(nullish coalescing) 運算子實作的，如果左側是undefinedor ，則回傳運算式的右側null。

uj5u.com熱心網友回復：

你不需要 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>

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

uj5u.com熱心網友回復：

children在類的 div 元素上使用屬性，item并使用屬性獲取標題、價格、顏色等 div 項的文本值Node.textContent。

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>

uj5u.com熱心網友回復：

:)

var output = [];

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

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

    output.push(row);

});

標籤：javascript jQuery

上一篇：我從jQuery得到的值是django中的NoneType

下一篇：使用attr選擇多個類。用jQuery