Get HTML in processors node instand of content

🙋Get Help
1

I would like to get all HTML with tags and content in processors using “node.children”
Right now I can only get content inside a specific tag only, how can I get all content with HTML?

in below code I would like to get all content inside div with class=“our-work-items”

<div class="our-work-items">
   <div class="our-work-data-loop">
      <div>
         <div class="work-color"><span class="css-tamv0u">#b76398</span></div>
         <div class="our-work-item css-1abkh9n">
            <div class="our-work-content">
               <div class="work-title">
                  <h2><strong>We Provide Aid</strong><br><strong>To Vulnerable Jews</strong></h2>
               </div>
               <div class="work-count"><span>15,000</span></div>
               <div class="work-content">people will be helped by 7.4 on any given day.</div>
               <a class="work-link with-arrow action-link" href="#" target="">Learn more</a>
            </div>
            <div class="our-work-image">
               <noscript><img alt="" class="frontity-lazy-image" src="wp-content/uploads/2020/09/helped-by-7.4.jpg"/></noscript>
               <img alt="" data-src="wp-content/uploads/2020/09/helped-by-7.4.jpg" class="frontity-lazy-image" style="visibility:hidden">
            </div>
         </div>
      </div>
      <div>
         <div class="work-color"><span class="css-1210jyv">#00C1DE</span></div>
         <div class="our-work-item css-3xsjm">
            <div class="our-work-content">
               <div class="work-title">
                  <h2><strong>We Provide Aid</strong><br><strong>To Vulnerable Jews</strong></h2>
               </div>
               <div class="work-count"><span>15,000</span></div>
               <div class="work-content">people will be helped by 7.4 on any given day.</div>
               <a class="work-link with-arrow action-link" href="#" target="">Learn more</a>
            </div>
            <div class="our-work-image">
               <noscript><img alt="" class="frontity-lazy-image" src="wp-content/uploads/2020/09/helped-by-7.4.jpg"/></noscript>
               <img alt="" data-src="wp-content/uploads/2020/09/helped-by-7.4.jpg" class="frontity-lazy-image" style="visibility:hidden">
            </div>
         </div>
      </div>
   </div>
</div>
2

Hi @parth.nextbits

Welcome to the Frontity community. Great to see that you’re trying out Frontity.

You should be able to do what you want with the Html2React package. See our documentation here for more information on using the package together with processors.

Alternatively we have a video about this in our YouTube channel.

Hope this helps.

3

@mburridge
Thanks this works with Components but when we create Processors I am not able to get all the content inside the specific Tag
I have to fetch each Tag content separately like shown below

let workCount = node.children[i].children[1].children[0].children[1].children[0].children[0].content
let workContent = node.children[i].children[1].children[0].children[2].children[0].content
let workLinkText = node.children[i].children[1].children[0].children[3].children[0].content

4

Hi @parth.nextbits

Do you have a repo so that we can take a look at your code? TBH I’m not sure what you’re trying to do.

5

@mburridge
I was trying to build the slider on content coming from WordPress.
So, my HTML structure which I am getting from WordPress is like my original Question above.

want me make slide for each Div inside the div with class=“our-work-data-loop”

Now to add react-slick I need to wrap that content in <Slider {...settings}>

and I have to get all the content for each child div like this - https://i.imgur.com/CKBAjy3.png

So, it there any way I can get all the HTML content including HTML structure inside “our-work-data-loop”

6

Hi @parth.nextbits

Where is this data coming from? Is it the archive page of a custom post type? If so it would be better to get the CPT data from the REST API, then it would be in a format which is much easier for you to work with.

7

No, this is added on the home page using Gutenberg in Magento so not getting that data directly in REST API.

8

Hi @parth.nextbits

If the data is only available as HTML then I think you will need to do what you’re already doing - but it’s very fragile, if your content has just one addition <span> element, or a <strong> or <em> your code is going to break.

Faced with this problem I would take another look at how the data is being sourced and maybe create a CPT for it so that the content can be retrieved using the REST API.

9

Okey, so there is no way to get the whole content including HTML tags when using processors is that right?

10

Yes, you are getting the whole content. But then you need to parse it in some way, which is what you’re already doing.