2016-07-15 105 views
0

我在我的HTML樹中有如下所示。我想創建一個JSON迭代通過divs記住哪個data-view是父母data-view的實際孩子。最終的結果會是這樣{"main":{"header":{"navbar":"some txt","static":"some text"},"slider":"some txt","footer":"some txt"}}獲取與Jsoup直接從父項下降的子元素?

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

我已經試過

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

但是這給了我所有的子元素,沒有辦法找到這孩子屬於哪個家長嗎?如果通過其他一些圖書館可以實現同樣的目標,我很樂意開啓這個功能。 更新:更新了我的html確切場景。請注意,

  • 我只能關注和迭代數據視圖節點,只記住哪個節點實際上是哪個父節點的子節點。
  • 數據文本節點總是包含在某個數據視圖節點中。
  • 注意其中包含數據文本節點的數據視圖節點模式。
+0

在更新後的例子就是期望輸出相同? –

+0

@DavidePastore我也更新了預期的json輸出。雖然它幾乎相同。 –

+0

@DavidePastore你找到了出路嗎? –

回答

1

是的,你可以使用Jsoup來做到這一點。我創建了一個遞歸方法,將被調用來從您的HTML動態生成JSON。

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

輸出:

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

Additional library for JSON

+0

精湛的Mate.But我也有一些不同的class n屬性的容器div,它在這些場景中打破了。 –

+0

嗨@PrototypeChain請編輯您的原始問題,以便我可以看到您的不同場景。 –

+0

用html更新我的問題。看看它的模式哥們。 'data-view'節點可以在任何地方,也可以包裹在一些wrapper div中。而且,數據文本節點只能包含在某個數據視圖節點中。 –