CODEWITHSUNDEEP
flutterflutter-webflutter-http
james
james

Reputation: 275

how can i parse html in flutter?

I am using Flutter and want to parse HTML using parser.dart

<div class="weather-item now"><!-- now  -->
   <span class="time">Now</span>
   
    <div class="temp">19.8<span>℃</span>
        <small>(23℃)</small>
    </div>
   
   <table>
       <tr>
           <th><i class="icon01" aria-label="true"></i></th>
           <td>93%</td>
       </tr>
       <tr>
           <th><i class="icon02" aria-label="true"></i></th>
           <td>south 2.2km/h</td>
       </tr>
       <tr>
           <th><i class="icon03" aria-label="true"></i></th>
           <td>-</td>
       </tr>
   </table>
</div>

Using, import 'package:html/parser.dart';

I want to get this data

Now,19.8,23,93%,south 2.2km/h

How can I do this?

Upvotes: 10

Views: 28387

Answers (2)

Tanuj
Tanuj

Reputation: 2260

Since you are using the html package, you can get the desired data like so using some html parsing and string processing (as needed), here is a dart sample, you can use the parseData function as is in your flutter application -

main.dart

import 'package:html/parser.dart' show parse;

main(List<String> args) {
  parseData();
}

parseData(){
  var document = parse("""
    <div class="weather-item now"><!-- now  -->
   <span class="time">Now</span>
   
    <div class="temp">19.8<span>℃</span>
        <small>(23℃)</small>
    </div>
   
   <table>
       <tr>
           <th><i class="icon01" aria-label="true"></i></th>
           <td>93%</td>
       </tr>
       <tr>
           <th><i class="icon02" aria-label="true"></i></th>
           <td>south 2.2km/h</td>
       </tr>
       <tr>
           <th><i class="icon03" aria-label="true"></i></th>
           <td>-</td>
       </tr>
   </table>
</div>
  """);

  //declaring a list of String to hold all the data.
  List<String> data = [];

  data.add(document.getElementsByClassName("time")[0].innerHtml);

  //declaring variable for temp since we will be using it multiple places
  var temp  = document.getElementsByClassName("temp")[0];
  data.add(temp.innerHtml.substring(0, temp.innerHtml.indexOf("<span>")));
  data.add(temp.getElementsByTagName("small")[0].innerHtml.replaceAll(RegExp("[(|)|℃]"), ""));

  //We can also do document.getElementsByTagName("td") but I am just being more specific here.
  var rows = document.getElementsByTagName("table")[0].getElementsByTagName("td");

  //Map elememt to its innerHtml,  because we gonna need it. 
  //Iterate over all the table-data and store it in the data list
  rows.map((e) => e.innerHtml).forEach((element) {
    if(element != "-"){
      data.add(element);
    }
  });

  //print the data to console.
  print(data);
  
}

Here's the sample output -

[Now, 19.8, 23, 93%, south 2.2km/h]

Hope it helps!

Upvotes: 17

Christopher Moore
Christopher Moore

Reputation: 17113

This article would probably be of help. It specifically uses the html package parser.

Following the example in the package's readme you can easily obtain a Document object. With this object you can obtain specific Elements of the DOM with methods like getElementById, getElementsByClassName, and getElementsByTagName. From there you can obtain the innerHtml of each Element that is returned and put together the output string you desire.

Upvotes: 3

Related Questions