title: Jsoup - retrieving & manipulating data
body: <p>So I'm having trouble figuring out how to manipulate the data completely that I'm scraping using Jsoup. I know how to target the areas but i don't know how to target them individually but still group them together. </p>
  
  <p>For Example: </p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;p&gt; Heading1 &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p&gt; Body1 &lt;p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;p&gt; Heading2 &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p&gt; Body2 &lt;p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;p&gt; Heading3 &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p&gt; Body3 &lt;p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;p&gt; Heading4 &lt;/p&gt;
      &lt;/div&gt;
  &lt;div class="panel-body"&gt;
      &lt;p&gt; Body4 &lt;p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to target different sections in this HTML and then place them in textViews a certain way. But when I try to for example target div.panel-heading &amp; div.panel-body and I want to place the heading above the body it will repeat all of the div.panel-headings for the entire page first then below that it will repeat all of the div.panel-bodys. It's printing them in totally separate groups instead of one on top of the other.</p>
  
  <p>Below is the code I'm using:</p>
  
  <pre><code>private void arbitrage() {
      new Thread(new Runnable() {
          @Override
          public void run() {
              final StringBuilder builder = new StringBuilder();
              final StringBuilder builder2 = new StringBuilder();
  
              try {
  
                  Document doc = Jsoup.connect("THE URL HERE").get();
                  Elements links = doc.select("div.panel.panel-default &gt; div.panel-heading");
                  Elements links2 = doc.select("div.panel.panel-default &gt; div.panel-body");
  
                  for (Element link : links) {
                      builder.append("\n").append(link.text());
  
                      builder2.append("\n").append(links2.text() + "\n");
  
                  }
              } catch (IOException e) {
                  builder.append("Error : ").append(e.getMessage()).append("\n");
              }
  
  
              runOnUiThread(new Runnable() {
                  @Override
                  public void run() {
                      arbitrage.setText(builder.toString() + builder2.toString());
                  }
              });
  
  
  
          }
      }).start();
  
  }
  </code></pre>
  
  <p>==-=-=-=-=-=-  EDITED =-=-=-=-=--</p>
  
  <p>I've changed the HTML code to better reflect what the web URL looks like. When I run my current code it displays.</p>
  
  <pre><code>Heading1
  Heading2
  Heading3
  Heading4
  
  Body1
  Body2
  Body3
  Body4
  </code></pre>
  
  <p>I want it to display as follows.</p>
  
  <pre><code>Heading1
  Body1
  
  Heading2
  Body2
  
  Heading3
  Body3
  
  Heading4
  Body4
  </code></pre>
  
  <p>So essentially, I want to grab the panel-heading &amp; panel-body individually, but display them together in a group. I can grab them both in one group by selecting div.panel.panel-default, but I don't have as much control on how this is displayed from a UI standpoint. At least I don't know how to manipulate that data when I scrape it all together like that.</p>
  
  <p>EDIT TWO =-=-=-=-=-=-=-=-</p>
  
  <p>I'm getting close, this code allows me to manipulate the data individually better, but still cant do what I need. I want to style the heading &amp; body let's say different colors. I can't figure this out.</p>
  
  <pre><code> for (Element panel : panels) {
                          Elements links = panel.select("div.panel-heading");
                          Elements links2 = panel.select("div.panel-body");
                          builder.append("\n").append(links.text()).append("\n").append("\n").append(links2.text())
                                  .append("\n")
                                  .append("\n");
  
                      }
  </code></pre>
  
  <p>changed my runOnUIThread to this: </p>
  
  <pre><code>  runOnUiThread(new Runnable() {
                      @Override
                      public void run() {
                          arbitrageTextView.setText(builder.toString());
                      }
                  });
  </code></pre>
  
  <p>But if I want to like change the text color for the header different from the body I'm not able to. Or add a divider between all of the groups, doesn't allow me to do this. It just seems very limited on the UI side of things, doesn't allow me to stylize them, just pull them in and display them. I believe this is because it's pulling it all in under one textView, would I need to put them in two different textViews?</p>