data binding in datagrid

[sanjeev-rajput]

can someone please help me why data is not being updated in DataGrid below is the simple code. Log is showing that data is updated in arraylist but same is reflecting in datagrid

MXML-------

      <j:View xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:j="library://ns.apache.org/royale/jewel" xmlns:js="library://ns.apache.org/royale/basic"
          initComplete="init()"  style="background:transparent; border: none;" >
          	<j:beads>
              <js:ContainerDataBinding/>
          </j:beads>
          <fx:Script>
              <![CDATA[
            import views.actionitemviews.websocket.SocketService;
            import org.apache.royale.collections.ArrayList;
            [Bindable]
            private var _stockList:ArrayList = new ArrayList();
            private var _socketService:SocketService;
            private function init():void {
                _socketService = new SocketService();
                _socketService.addCAllBackFunction(onSocketData);   
                _socketService.connectWebSocket(SocketService.SUBSCRIBE_STOCK);
            }

            private function onSocketData(data:Object):void {
                if (data.type == "stock_update") {
                    //console.log("📈 Stock update:", data.payload);
                    updateFromJSON(data.payload); // we’ll structure this properly below
                } else {
                    console.log("📩 Other data received:", data);
                }
            }
            public function updateFromJSON(json:Array):void {
                var updatedSymbols:Object = {};
                for each (var obj:Object in json) {
                updatedSymbols[obj.symbol] = obj;

                // Check if stock already exists
                var found:Boolean = false;
                for (var i:int = 0; i < _stockList.length; i++) {
                    var existing:StockModel = _stockList.getItemAt(i) as StockModel;
                    if (existing.symbol === obj.symbol) {
                    existing.price = obj.price;
                    existing.timestamp = obj.timestamp;
                  // console.log(obj.symbol, obj.price, obj.timestamp)
                    found = true;
                    break;
                    }
                }
                // If not found, add new
                if (!found) {
                    _stockList.addItem(new StockModel(obj.symbol, obj.price, obj.timestamp));
                }
                }
                console.log('_stockList'+_stockList.getItemAt(0).price)
            }
            public function disposeMe():void {
                var obj:Object = {"type": "unsubscribe_stock"}
                _socketService.sendToSocket(obj);
                console.log('unsubscribe_stock')
                _socketService.disconnectWebSocket();
            }
        ]]>
    </fx:Script>
     <j:DataGrid id="dg1" dataProvider="{_stockList}" width="100%">
        <j:columns>
            <j:DataGridColumn dataField="symbol" label="Symbol"/>
            <j:DataGridColumn dataField="price" label="Price"/>
            <j:DataGridColumn dataField="timestamp" label="Time"/>
        </j:columns>
        </j:DataGrid>
  </j:View>

SocketModel.as

package views.actionitemviews.stockSocket {  
    [Bindable]
    public class StockModel {
      public var symbol:String;
      public var price:Number;
      public var timestamp:String;
      public function StockModel(symbol:String, price:Number, timestamp:String = "") {
        this.symbol = symbol;
        this.price = price;
        this.timestamp = timestamp;
      }
    }
  }