0

EventSource インターフェイスから出力される次のデータを取得しました。このデータを使用して、Angular ng-repeat を使用して単純なテーブルを作成しています (以下のテーブル構造を指定しました)。私が抱えている問題は、データが急速に変化するためです。つまり、サーバーは要求されたシンボルの変更を継続的に送信し、値を更新し続けます。シンボルに対してデータが要求されたときに行を追加し、新しい値に対して同じ行を更新する必要があります。これはかなり簡単で、機能しています。

しかし、本当の課題は (少なくとも私にとっては) 別のシンボルを要求したときに、それを新しい 2 行目に追加し、これからは両方の行の値を更新する必要があることです。新しいシンボルをリクエストすると、それが続きます。次のデータ構造でこれが可能である場合は、説明してください。

データ構造：

data = [
  AMZN: {
    name: Amazon,
    symbol: AMZN,
    openPrice: $100,
    latestPrice: $200,
    percentage: 0.1
 },
 FB: {
    name: Facebook,
    symbol: FB,
    openPrice: $150,
    latestPrice: $250,
    percentage: 0.2
 }
]

テーブル構造:

<table>
        <thead>
            <tr>
                <th>Session ID</th>
                <th>Company Name</th>
                <th>Symbol</th>
                <th>Open Price</th>
                <th>Latest Price</th>
                <th>Percentage</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stockVal in data">
                <td>[Empty]</td>
                <td>{{stockVal.companyName}}</td>
                <td>{{stockVal.companySymbol}}</td>
                <td>{{stockVal.openPrice}}</td>
                <td>{{stockVal.latestPrice}}</td>
                <td>{{stockVal.percentage}}</td>
            </tr>
        </tbody>
    </table>

AMZN のリクエストを行うと、Amazon に関連する値がテーブルに入力され、FB をリクエストすると同じ行の値が置き換えられます。つまり、FB と AMZN の両方が同じ行で置き換えられます。肝心なのは、FB値を新しい行に入力したいということです。

コントローラーコード:

window.EventSource でエンドポイントをリクエストし、データを取得してスコープ オブジェクトにアタッチするだけです。n 個の行が入力されるのを避けるために、長さを 0 にするなど、毎回データ配列がフラッシュされます。

以下のコントローラーコードを追加すると、

$scope.generateData = _generateData;

function generateData() {

endPoint = '/getData'
$scope.symbols = window.document.getElementById('symbols').value;
var eventSource = new window.EventSource(endPoint + '?&s=' + $scope.symbols); 

eventSource.onmessage = function(e) {

    var data = null;
    try {
       data =  JSON.parse(e.data);
    } catch (err){

    }

    if(data) {

      $scope.$apply(function () {
        $scope.companyName = data.name;
        $scope.companySymbol = data.symbol;
        $scope.openPrice = data.openPrice;
        $scope.latestPrice = data.latestPrice;
        $scope.percentage = data.percentage;
      });

      var specData = {
        [$scope.companySymbol]: {
          name: $scope.companyName,
          symbol: $scope.companySymbol,
          openPrice: $scope.openPrice,
          latestPrice: $scope.latestPrice,
          percentage: $scope.percentage
        }
      }

      $scope.data[0] = specData[$scope.companySymbol];

    }

 }

};
4

0 に答える 0