Dart Parse JSON into Table

Question

I'm trying to figure out how to parse a JSON feed into a table in Dart. I'm not sure if I should use a Map but if I do, I'm not sure how to approach extracting data. I want to have one cell to hold the assetID, then another for domain name, and another for IP address. Please let me know if you need more information.

Dart:

void loadData()
{
  var url = "http://localhost:8080/***selectAll";

  //call the web server asynchronously
  var request = HttpRequest.getString(url).then(onDataLoaded);

}



void onDataLoaded(String response)
{
  TableElement table = querySelector("#domainTableSelector");
  //table.children.add();

  var jsonString = response;
 // print(jsonString);

  List<String> list = new List<String>();
  list.add(jsonString);

  for (var x = 0; x < list.length; x++) 
  {
    //create new table row 
    TableRowElement row = table.insertRow(x+1);
    TableCellElement cell = row.insertCell(x);
    cell.text = list.toString();
     // print(list);
  }
//  Iterator itr= list.iterator();
//
//  print("Displaying List Elements,");
//
//   while(itr.hasNext())
//    {
//      print(itr.next());
//    }
}

JSON

[{"serviceResponseValue":[{"assetId":"8a41250446b89b5f0146b04d49910023","oplock":0,"longitude":115.86,"domainName":"free-aus-trip.au","latitude":-31.95,"ipAddress":"6.0.0.6"},{"assetId":"8a49859246918966014691b1aac9000c","oplock":0,"longitude":-65.30,"domainName":null,"latitude":-24.18,"ipAddress":"4.0.0.4"},{"assetId":"8a49859246876566014691b1437512e4","oplock":0,"longitude":77.60,"domainName":"allmovies.cn","latitude":12.97,"ipAddress":"14.0.0.14"},{"assetId":"8a49850446b04b5f0146b04d49910000","oplock":0,"longitude":112.47,"domainName":"getrichez.cn","latitude":32.98,"ipAddress":"5.0.0.5"},{"assetId":"8a498592469189660146919b7a210006","oplock":0,"longitude":-37.61,"domainName":"googles.com","latitude":55.75,"ipAddress":null},{"assetId":"8a42250876b89b5f0876b04d49910763","oplock":0,"longitude":-68.90,"domainName":"lolcatzfun.net","latitude":-22.48,"ipAddress":"8.0.0.8"},{"assetId":"8a498592469189660146919f8d700008","oplock":0,"longitude":113.50,"domainName":"ccn.com","latitude":52.03,"ipAddress":null},{"assetId":"8a45250446b89b5f0876b04d49910187","oplock":0,"longitude":115.84,"domainName":"free-aus-trip.au","latitude":-31.86,"ipAddress":"7.0.0.7"},{"assetId":"8a49859246918966014691aeda76000a","oplock":0,"longitude":3.38,"domainName":"cashnow.net","latitude":6.52,"ipAddress":"2.0.0.2"},{"assetId":"8a49859246918966014691ae19df0009","oplock":0,"longitude":7.48,"domainName":"free-money.tv","latitude":9.07,"ipAddress":"222.222.222.222"},{"assetId":"8a498592469189660146919e09900007","oplock":0,"longitude":30.34,"domainName":"facebok.com","latitude":59.93,"ipAddress":"111.111.111.222"},{"assetId":"8a49859246918966014691b14375000b","oplock":0,"longitude":116.41,"domainName":null,"latitude":39.90,"ipAddress":"0.0.0.111"}],"messages":{"messages":[]}}]

Answer 1

You parse JSON into a Dart data structure using

import 'dart:convert' show JSON;

var decoded = JSON.decode(jsonString);

see also How to handle JSON in Dart (Alexandres answer)

decoded is then a Dart data structure (lists, maps, values) that you can iterate over or investigate in the debugger. If you need further assistance please add a comment.

Answer 2

To work with JSON, you have in dart a great thing : dart:convert => JSON

here some example of use:

var encoded = JSON.encode([1, 2, { "a": null }]);
var decoded = JSON.decode('["foo", { "bar": 499 }]');

I have done some thing but i'm not sure that is fit perfectly with your need

import 'dart:html';
import 'dart:convert';

void loadData()
{
  var url = "http://localhost:8080/***selectAll";

  //call the web server asynchronously
  var request = HttpRequest.getString(url).then(onDataLoaded);

}



void onDataLoaded(String response)
{
  TableElement table = querySelector("#domainTableSelector");
  //table.children.add();

  var jsonString = response;
 // print(jsonString);

  var jsonObject = JSON.decode(jsonString);

  for (var x = 0; x < jsonObject.length; x++) 
  {
    //create new table row 
    TableRowElement row = table.insertRow(x+1);

      for (var d in jsonObject[x]["serviceResponseValue"]) {
        TableCellElement cell = row.insertCell(x);
        cell.text = d["assetId"];

        cell = row.insertCell(x);
        cell.text = d["domainName"];

        cell = row.insertCell(x);
        cell.text = d["ipAddress"];

        print(d["assetId"]);
        print(d["domainName"]);
        print(d["ipAddress"]);

      }
     // print(list);
  }

}