javascript - Cheerio，如何将其提取为json？

Question

我有一个类似这样的 html 页面，其中包含 2 个产品和基于条件的不同版本，在本例中 1 个产品有 4 个条件

<div class="listing_item">
<ul class="listedItem listedItem--searched">
    <li>
        <a href="itemproduct.html">
            <div class="itemImg">
                <img class="lazy" alt="Item name 1" src="some.jpg" data-original="some.jpg" style="display: block;">
                </div>
                <div class="icon">
                </div>
            </a>
            <a href="item1productdetails.html" class="itemName">Item name 1</a>
            <div class="tableHere product">
                <div class="sameSearchButton">
                    <a href="etctectect">
            Search item here
                    </a>
                </div>
                <div class="row not-first ng-star-inserted">
                    <div class="col-xs-1 ng-star-inserted">
                        <strong>
                                        Condition 1
                        </strong>
                    </div>
                    <div class="col-xs-4 ng-star-inserted">10 USD</div>
                    <div class="col-xs-2">stock 10</div>
                    <div class="col-xs-2 ng-star-inserted">
                        <div class="asSpinner">
                            <select id="quantity_511377" class="form-control product-listing__qty-to-buy" name="quantityToBuy">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-3 ng-star-inserted">
                        <button id="cart_511377" class="btn btn-primary btn-sm addCart" data-productclass="511377" title="Add to Cart" type="button">
                            <i aria-hidden="true" class="fas fa-shopping-cart"/>
                        </button>
                    </div>
                </div>
                <div class="row not-first ng-star-inserted">
                    <div class="col-xs-1 ng-star-inserted">
                        <strong>
                                        Condition 2
                        </strong>
                    </div>
                    <div class="col-xs-4 ng-star-inserted">20 USD</div>
                    <div class="col-xs-2">stock 120</div>
                    <div class="col-xs-2 ng-star-inserted">
                        <div class="asSpinner">
                                        &nbsp;
                        </div>
                    </div>
                    <div class="col-xs-3 ng-star-inserted">
                        <button class="btn btn-primary btn-sm notifyme" type="button" title="Request for Items Waiting for Arrival." data-productclass="511378">
                            <i aria-hidden="true" class="icon fas fa-exclamation-circle"/>
                        </button>
                    </div>
                </div>
                <div class="row not-first ng-star-inserted">
                    <div class="col-xs-1 ng-star-inserted">
                        <strong>
                                        Condition 3
                        </strong>
                    </div>
                    <div class="col-xs-4 ng-star-inserted">9 usd</div>
                    <div class="col-xs-2">stock 5</div>
                    <div class="col-xs-2 ng-star-inserted">
                        <div class="asSpinner">
                                        &nbsp;
                        </div>
                    </div>
                    <div class="col-xs-3 ng-star-inserted">
                        <button class="btn btn-primary btn-sm notifyme" type="button" title="Request for Items Waiting for Arrival." data-productclass="511379">
                            <i aria-hidden="true" class="icon fas fa-exclamation-circle"/>
                        </button>
                    </div>
                </div>
                <div class="row not-first ng-star-inserted">
                    <div class="col-xs-1 ng-star-inserted">
                        <strong>
                                       Condition 4
                        </strong>
                    </div>
                    <div class="col-xs-4 ng-star-inserted">700 USD</div>
                    <div class="col-xs-2">stock 10</div>
                    <div class="col-xs-2 ng-star-inserted">
                        <div class="asSpinner">
                                        &nbsp;
                        </div>
                    </div>
                    <div class="col-xs-3 ng-star-inserted">
                        <button class="btn btn-primary btn-sm notifyme" type="button" title="Request for Items Waiting for Arrival." data-productclass="511380">
                            <i aria-hidden="true" class="icon fas fa-exclamation-circle"/>
                        </button>
                    </div>
                </div>
            </div>
            <div class="soldout" style="display: none;" data-soldout="false"/>
        </li>
        <li>
                <a href="itemproduct.html">
                <div class="itemImg">
                    <img class="lazy" alt="Item name 1" src="some.jpg" data-original="some.jpg" style="display: block;">
                    </div>
                    <div class="icon">
                    </div>
                </a>
                <a href="
        item2productdetails.html" class="itemName">Item name 2</a>
                <div class="tableHere product">
                    <div class="sameSearchButton">
                    <a href="etctectect">
            Search item here
                    </a>
                </div>
                    <div class="row not-first ng-star-inserted">
                        <div class="col-xs-1 ng-star-inserted">
                            <strong>
                                       Condition 1
                            </strong>
                        </div>
                        <div class="col-xs-4 ng-star-inserted">2,000 USD</div>
                        <div class="col-xs-2">stock 29</div>
                        <div class="col-xs-2 ng-star-inserted">
                            <div class="asSpinner">
                                <select id="quantity_511982" class="form-control product-listing__qty-to-buy" name="quantityToBuy">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row not-first ng-star-inserted">
                        <div class="col-xs-1 ng-star-inserted">
                            <strong>
                                        Condition 2
                            </strong>
                        </div>
                        <div class="col-xs-4 ng-star-inserted">1,800 USD</div>
                        <div class="col-xs-2">stock 20</div>

                    </div>
                    <div class="row not-first ng-star-inserted">
                        <div class="col-xs-1 ng-star-inserted">
                            <strong>
                                       Condition 3
                            </strong>
                        </div>
                        <div class="col-xs-4 ng-star-inserted">1,600 USD</div>
                        <div class="col-xs-2">stock 4</div>
                        <div class="col-xs-2 ng-star-inserted">
                            <div class="asSpinner">
                                        &nbsp;
                            </div>
                        </div>

                    </div>
                    <div class="row not-first ng-star-inserted">
                        <div class="col-xs-1 ng-star-inserted">
                            <strong>
                                        Condition 4
                            </strong>
                        </div>
                        <div class="col-xs-4 ng-star-inserted">1,400 USD</div>
                        <div class="col-xs-2">stock 2</div>
                        <div class="col-xs-2 ng-star-inserted">
                            <div class="asSpinner">
                                        &nbsp;
                            </div>
                        </div>

                    </div>
                </div>
                <div class="soldout" style="display: none;" data-soldout="false"/>
            </li>
        </ul>
    </div>

使用cheerio，我在提取它们并将它们制作为像这样的json数据时遇到问题

{
"Item 1": [
    {
        "price": 1,
        "conditon": "condition 1",
        "stock": "1"
    },
    {
        "price": 1,
        "conditon": "condition 2",
        "stock": "1"
    },
     {
         "price": 1,
        "conditon": "condition 3",
        "stock": "1"
    },
     {
         "price": 1,
        "conditon": "condition 4",
        "stock": "1"
    }
],
"Item 2": [
    {
        "price": 1,
        "conditon": "condition 1",
        "stock": "1"
    },
    {
        "price": 1,
        "conditon": "condition 2",
        "stock": "1"
    },
     {
         "price": 1,
        "conditon": "condition 3",
        "stock": "1"
    },
     {
         "price": 1,
        "conditon": "condition 4",
        "stock": "1"
    }
]

}

目前我正在做这样的事情

    $('.listing_item ul li').each(function(i, elm) {

         cardName = $(this).find('a[class=itemName]').text().trim()


  $('div[class="row not-first ng-star-inserted"]').each(function(){
    var obj = {
        condition: $(this).find('div[class="col-xs-1 ng-star-inserted"]').text().trim(),
        price: $(this).find('div[class="col-xs-4 ng-star-inserted"]').text().trim(),
        stock: $(this).find('div[class="col-xs-2"]').text().trim()
    };


  })

}); 但我发现在输出过程中出现了很多重复，假设第 1 项有 4 个条件，但它变成了 8。我不知道如何通过从 Cheerio 中提取将其转换为 json

Answer 1

$('div[class="row not-first ng-star-inserted"]') 加载具有 row 类的所有 div 项、not-first 和 ng-star-inserted 同时出现。错误在于您在文档中搜索此类项目，并且没有缩小当前 li 的搜索范围，例如

    $('.listing_item ul li').each(function(i, elm) {

         cardName = $(this).find('a[class=itemName]').text().trim();


         $(this).find('div[class="row not-first ng-star-inserted"]').each(function(){
             var obj = {
                 condition: $(this).find('div[class="col-xs-1 ng-star-inserted"]').text().trim(),
                 price: $(this).find('div[class="col-xs-4 ng-star-inserted"]').text().trim(),
                 stock: $(this).find('div[class="col-xs-2"]').text().trim()
         };


   });

所以$ => $(this).find

编辑

要构建问题中的 JSON，您可以执行以下操作:

    var myJSON = {};
    $('.listing_item ul li').each(function(i, elm) {

         cardName = $(this).find('a[class=itemName]').text().trim();
         myJSON[cardName] = [];


         $(this).find('div[class="row not-first ng-star-inserted"]').each(function(){
             var obj = {
                 condition: $(this).find('div[class="col-xs-1 ng-star-inserted"]').text().trim(),
                 price: $(this).find('div[class="col-xs-4 ng-star-inserted"]').text().trim(),
                 stock: $(this).find('div[class="col-xs-2"]').text().trim()
             };
             myJSON[cardName].push(obj);


   });

未经测试。