RxJSストリームの非同期処理

Question

//app.js 
import $ from 'jquery'; 
import Rx from 'rxjs/Rx'; 

var $pull = $('#fetch');//this is a button id 
var pull$ =Rx.Observable.fromEvent($pull,'click').startWith("/hcdata.json"); 

var $result = $(".datab");//class for HTML table 
var classarray = ['id','type','name','image','tn']; 

var resp$ = pull$.flatMap(
    function(reqdata){ 
     return Rx.Observable.fromPromise($.getJSON(reqdata)); 
    }); 

var pri$ = resp$.subscribe(
    function(data){ 
     var head = Object.keys(data[0]); 
     var len = head.length; 
     $result.empty(); 
     $("<tr>").appendTo($result); 
     $.each(head,function(i,value){ 
     $("<th class='tablehead'>"+value.toUpperCase()+"`</th>").appendTo($result)})` 
     $("</tr>").appendTo($result); 
     console.log(head); 

     for(var j= 0;j<data.length;j++) 
     { 
      $("<tr >").appendTo($result); 
      for(var i =0;i<len;i++) 
      { 
       //alert(data[j][head[i]]); 
       $("<td contenteditable='true' class='"+classarray[i]+"''>"+data[j][head[i]]+"</td>").appendTo($result) 
      } 
      $("</tr>").appendTo($result); 
     } 

    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Completed"); 
    }); 

    //element assignment 
    var $idv = $(".id"); 
    var $typv = $(".type"); 
    var $nmv = $(".name"); 
    var $imgv = $(".image"); 
    var $tnv = $(".tn"); 

    //not working with no errors 
    var abc$ = Rx.Observable.defer(function(){ 
     return Rx.Observable.fromEvent($idv,'blur'); 
    }); 

    var lat$ = abc$.map(function(e){ 
     console.log(e.target.innerText);  
     return e.target.innerText; 
    }).flatMap(function(data){ 
     return Rx.Observable.fromPromise(function(data){ 
      return Promise.resolve(data); 
     }); 
    }); 

    var sub = lat$.subscribe(function(x){ 
     if (x === parseInt(x, 10)) 
      alert("data is integer") 
     else 
      alert("data is not an integer") 
    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Finally"); 
    }) 

私が言及したJSONファイルから取得したデータを持っているとfine.Theの問題を働いているテーブル、にそれを構成することは私はさらに任意のセルを編集する上でのonblurイベントを使用しようとしたいですこのイベントハンドリングはエラーなしでは機能しません。この非同期式のリアクティブプログラミングの新機能です。助けてください。

Answer 1

また、BackTickの問題。それを修正すれば、実際のエラーを理解することができます。

//app.js 
import $ from 'jquery'; 
import Rx from 'rxjs/Rx'; 

var $pull = $('#fetch');//this is a button id 
var pull$ =Rx.Observable.fromEvent($pull,'click').startWith("/hcdata.json"); 

var $result = $(".datab");//class for HTML table 
var classarray = ['id','type','name','image','tn']; 

var resp$ = pull$.flatMap(
    function(reqdata){ 
     return Rx.Observable.fromPromise($.getJSON(reqdata)); 
    }); 

var pri$ = resp$.subscribe(
    function(data){ 
     var head = Object.keys(data[0]); 
     var len = head.length; 
     $result.empty(); 
     $("<tr>").appendTo($result); 
     $.each(head,function(i,value){ 
     $("<th class='tablehead'>"+value.toUpperCase()+"`</th>").appendTo($result)}) 
     $("</tr>").appendTo($result); 
     console.log(head); 

     for(var j= 0;j<data.length;j++) 
     { 
      $("<tr >").appendTo($result); 
      for(var i =0;i<len;i++) 
      { 
       //alert(data[j][head[i]]); 
       $("<td contenteditable='true' class='"+classarray[i]+"''>"+data[j][head[i]]+"</td>").appendTo($result) 
      } 
      $("</tr>").appendTo($result); 
     } 

    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Completed"); 
    }); 

    //element assignment 
    var $idv = $(".id"); 
    var $typv = $(".type"); 
    var $nmv = $(".name"); 
    var $imgv = $(".image"); 
    var $tnv = $(".tn"); 

    //not working with no errors 
    var abc$ = Rx.Observable.defer(function(){ 
     return Rx.Observable.fromEvent($idv,'blur'); 
    }); 

    var lat$ = abc$.map(function(e){ 
     console.log(e.target.innerText);  
     return e.target.innerText; 
    }).flatMap(function(data){ 
     return Rx.Observable.fromPromise(function(data){ 
      return Promise.resolve(data); 
     }); 
    }); 

    var sub = lat$.subscribe(function(x){ 
     if (x === parseInt(x, 10)) 
      alert("data is integer") 
     else 
      alert("data is not an integer") 
    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Finally"); 
    })