Get child elements that directly descent from parent with Jsoup?

Question

I have something like below in my HTML tree. I want to create a JSON by iterating through divs keeping in mind which data-view is actualy child of which parent data-view. Final Result would be like {"main":{"header":{"navbar":"some txt","static":"some text"},"slider":"some txt","footer":"some txt"}}

<div id="loader-div"></div>
<div class="main-container">
    <div data-view="main" data-class="main_class">
        <div class="details_container">
            <h1>Helo Text</h1>
            <div data-view="header" data-class="header_class">
                <h2>Hello Header</h2>
                <div data-view="navbar" data-class="navbar_class">
                    <h2>sdf</h2>
                    <span data-text="navbarDataId">some text</span>
                </div>
                <div class="brder_bttm clearfix">
                    <div data-view="static" data-class="static_class">
                        <span data-text="navbarDataId">some text</span>
                        <button data-event="show_all" class="btn btn-block btn-success">Show All</button>
                    </div>
                </div>
                <span>some text</span>
            </div>
            <div class="slider_container">
                <div data-view="slider" data-class="slider_class">
                    <span data-text="sliderDataId">some text</span>
                </div>
            </div>
            <div data-view="footer" data-class="footer_class">
                <span data-text="footerDataId">some text</span>
            </div>
        </div>
    </div>
</div>

I have tried

for (int z = 0; z < doc.getElementsByAttributeStarting("data-view").size(); z++ ){
   String dtview= doc.getElementsByAttributeStarting("data-view").get(z).attr("mt-class")
}

But this gives me all child elements and have no way to find which children belongs to which parent ? If same can be achieved through some other library, I'm happy to switch on that. Update : Updated my html for exact scenario. Please note,

• I have to focus and iterate on data-view nodes only keeping in mind which node is actually a child of which parent.
• data-text node always be contained in some data-view node.
• Notice its a pattern of data-view nodes which contains data-text nodes.

Answer 1

Yes you can do it using Jsoup. I created a recursive method that will be called to dynamically generate the JSON from your HTML.

package com.github.davidepastore.stackoverflow38395047;

import org.json.JSONObject;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

/**
 * Stackoverflow 38395047 answer.
 *
 */
public class App {
    public static void main(String[] args) {
        String html = "<div data-view=\"main\">\r\n"
                + "    <div data-view=\"header\">\r\n"
                + "        <div data-view=\"navbar\">\r\n"
                + "            <span>some text</span>\r\n"
                + "        </div>\r\n" + "        <span>some text</span>\r\n"
                + "    </div>\r\n" + "    <div data-view=\"slider\">\r\n"
                + "        <span>some text</span>\r\n" + "    </div>\r\n"
                + "    <div data-view=\"footer\">\r\n"
                + "        <span>some text</span>\r\n" + "    </div>\r\n"
                + "</div>";
        JSONObject json = new JSONObject();

        Document document = Jsoup.parse(html);
        Element body = document.select("body").first();
        json = (JSONObject) generateJson(body);
        System.out.println(json.toString(2));
    }

    public static Object generateJson(Element element){
        JSONObject json = new JSONObject();
        Elements children = element.children();
        for (Element child : children) {
            if(child.tagName().equals("div")){
                String dataView = child.attr("data-view");
                json.put(dataView, generateJson(child));
            } else if(json.keySet().size() == 0){
                return child.text();
            }
        }
        return json;
    }
}

Output:

{"main": {
  "footer": "some text",
  "slider": "some text",
  "header": {"navbar": "some text"}
}}

Additional library for JSON