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 파일에서 가져온 데이터를 가지고 좋아 보입니다 문제를 작업하는 테이블로 구조화하는 것은 내가 더 셀 편집에 대한 위해 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"); 
    })