CODEWITHSUNDEEP
jqueryhtmlcheerio
user1897151
user1897151

Reputation: 503

node traverse using cheerio js

I have something like this (html code) fetch with snekfetch

<div class="entry-content">
<h4>today's date etc etc</h4>
    <h3>category name 1</h3>
    <p>
        <img class="aligncenter" src="img_1.png" alt="" />
    </p>
    <div></div>
    <p>
        <img class="aligncenter" src="img_2.png" alt="" />
    </p>
    <div></div>
    <h4>today's date etc etc</h4>
    <h3>category name 2</h3>
    <p>
        <img class="aligncenter" src="img_3.png" alt="" />
    </p>
    <div></div>
    <h4>today's date etc etc</h4>
    <h3>category name 3</h3>
    <p>
        <img class="aligncenter" src="img_4.png" alt="" />
    </p>
    <div></div>
</div>

My purpose of using cheerio is to extract the img src, I manage to extract the img src but the problem is, I need to categorize them in name such as img_1.png and img_2.png belongs to <h3> tag category name 1 and so on.

I would to store them in an array such as 

 name: category 1
 src: img_1.png
 name: category 1
 src: img_2.png

and so on for all other category name with the img src under those <h3> tag

also this result from snekfetch can be random which means category name 1 sometimes have 3-4 images instead of 2 possible even 1.

So I would like to use cheerio to detect them dynamic but I am not sure how to do that.

Upvotes: 0

Views: 1601

Answers (1)

lulliezy
lulliezy

Reputation: 2043

How about this

let $ = cheerio.load(html);
let currentElement, data = {};

$(".entry-content").find("h3").each(function () {
    data[$(this).text()] = [];

    currentElement = $(this);

    while(currentElement.next().length && currentElement.next().prop("tagName").indexOf("H") === -1) {
        if (currentElement.next().find("img").length > 0) {
            data[$(this).text()].push(currentElement.next().find("img").first().attr("src"));
        }

        currentElement = currentElement.next();
    }
});

I haven't tested this, but the logic should be pretty much okay, incase it isn't I will be glad to help

EDIT I have created an object where the keys are the categories which have an array of the pics, its more flexible that way but you can adjust it to your liking or just ask if you get stuck

Upvotes: 1

Related Questions