1

Sails バックエンド (sails-mysql アダプターを使用) から ui-grid にデータを取り込む角度のあるフロントエンドがあります。このデータセットは大きいため、ページにデータが含まれているように見えるようになるまで、読み込みに時間がかかります。

セイルからのストリーミングの基本は次のとおりです。

findAllStream: function (req, res) {
    Model.stream().pipe(res);
}

ここまでは、モデルからフロントエンドに個々のデータをストリーミングします。このストリームを消費するために angular-oboe を使用しています:

vm.myData = [];
var obj = {};
var count = 0;
Oboe({
    url: '/api/model/findAllStream',
    pattern: '*',
    start: function(stream) {
        // handle to the stream
        vm.stream = stream;
        vm.status = 'started';
    },
    done: function(parsedJSON) {
        vm.status = 'done';
    }
}).then(function() {
    // promise is resolved
    console.log('done');
}, function(error) {
    // handle errors
    console.log('error');
}, function(node) {
    // node received
    switch (count) {
        case 0:
            obj['id'] = node;
            break;
        case 1:
            regObj['property'] = node;
            break;
        case 2:
            regObj['function'] = node;
            break;
    }

    if (++count === 3) {
        vm.myData.push(regObj);
        count = 0;
        obj = {};
    }
});

基本的に、データのノードは同じ順序で来るように見えるので、受け取ったノードの数を追跡し、そのようにオブジェクトを構築します。次に、各オブジェクトを配列にプッシュして、uigrid で使用できるようにします。

たとえば、find() によって返されるデータは次のようになります。

[
{
  id: 1,
  property: foo,
  function: bar
},
{
  id: 2,
  property: stuff,
  function: things
}
]

これは、angular および uigrid でうまく機能します。しかし、ストリームを使用すると、次のようになります。

1
foo
bar
2
stuff
things

特にモデルが変更された場合、これは理想的ではありません。値だけでなくキーを送信する方法はありますか? それとも、ストリームから JSON を送信しますか? 何かのようなもの:

  id: 1,
  property: foo,
  function: bar
  id: 2,
  property: stuff,
  function: things

ありがとう!

4

1 に答える 1