Create javascript object from dart

Question

I have Dart application that reads data and calls method from javascript to draw a tree from that data (in D3) I want to create js object on Dart side and draw it on javascript side.

But on Dart side I get expected result and cannot convert to js object properly..

javascript:

var treeRoot  = [{}]; // <-- I want to fill this object on Dart side

function updateTree() {    
  var nodes = tree.nodes(treeRoot).reverse(), // <- use this object on js side
  links = tree.links(nodes);
  // .. code for tree drawing
}

Dart:

Future _showTree() async {
    var treeData = getTreeData();

    // try to fill js object with my data
    js.context['treeRoot'] = new js.JsObject.jsify([treeData]);

    // DART PRINT
    var treeRoot = await js.context['treeRoot'];
    print('dart : treeRoot\n' + treeRoot.toString());

    js.context.callMethod('updateTree');

 }

As result in DART PRINT I see what I expect:

dart : treeRoot
[name: A 1
  child: {
    name: B 1
    child: {
      name: D 1
    }
    child: {
      name: E 1
    }
  }
  child: {
    name: C 1
  }
]

But when I look at treeRoot from console (to check js object) I get

[DartObject
o: Tree
__proto__: DartObject]

(Tree is type of getTreeData() in Dart)

How can I get object in format that I printed in DART PRINT? I want to use it as simple js object, forget about any dart objects on js side. (when I look on that 'o' objet, I dont see 'child' and 'name' properties, there is a loot of other stuff)

Small note: I know that json can be used for that communication, but I want js object without any json conversions.

pub.dartlang.org/packages/js probably makes it easier to do what you want. It's the new way anyway. The docs are a bit sparse. There are a view questions with answers though here on SO under the tag dart-js-interop stackoverflow.com/questions/tagged/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 7, 2016 at 20:27
The docs are a bit sparse in Dart is not uncommon. For example, the docs are also a bit sparse for native extensions. — mezoni
– mezoni, Commented Sep 8, 2016 at 7:35
Thanks for comments! I see that I can create js object with js-interop as here stackoverflow.com/questions/33394867/… . But then I have to traverse my dart tree and fill that @JS object. Is there a way to convert my JsObject (see DART PRINT upper) to object that is declared via @JS? — Zheden
– Zheden, Commented Sep 8, 2016 at 8:41

Zheden · Accepted Answer · 2016-09-09 13:23:07Z

1

As Gunter suggested, I should use dart-js-interop. So I create js object in dart - JsTree. To fill the data I traverse tree.

Object is declared like this:

@anonymous
@JS()
class Tree {
  external String get name;
  external set name(String value);

  external List<Tree> get children;
  external set children(List<Tree> value);
}

@JS()
external buildTree(Tree tree);

in dart I call:

Tree jsTree = copyDartTree(treeData);
// call js function
buildTree(jsTree);

answered Sep 9, 2016 at 13:23

Zheden

6032 gold badges13 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create javascript object from dart

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related