Question

我正在尝试了解有关RxJs的一些事情。我想要做的是消耗一些JSON数据，并在它进入时立即开始在DOM上呈现该数据。我已经设置了流请求，响应和显示。它输出的每一个都很好，但它一次完成，而不是随着时间的推移。

我想开始在页面上显示数据，而不是等待整个文件完成，然后立即显示，这会产生很长的等待时间。

//Cache the selector
var $resultList = $('.results');

//Gets the JSON (this will not be a static file,just for testing)
var requestStream = Rx.Observable.just("/results.json");

var responseStream = requestStream
    .flatMap(function(requestUrl) {
            return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl))
             });

var displayStream = responseStream.subscribe(
    function(response) {
    //This maps to a Handlebars Template and puts it on the DOM
    $resultList.html(compiledTemplate(response)); 
            },
            function(err) {
                    console.log('Error: %s', err);
             },
             function() {
                    console.log('Completed');
             });




//Sample of the data from the JSON file
Object{
    beginIndex: "1"
    catId: "111"
    endIndex: "1"
    products: Array[100]

}

Answer 1

如果我理解得好，有两个相关要点：

您需要找到一种方法来从该文件中获取对象流当您读完该文件（$resultList.html($resultList.html() + compiledTemplate(response));）时，而不是一个大对象。该其中的机制首先取决于源的结构（文件和文件读取机制）而不是在Rxjs上（每一行都是一个可以导致信息的对象显示等？）。一旦你拥有了“最小可显示信息单位”，你就可以使用Rxjs来缓冲/处理它（你想为每个对象显示一些东西，或者每100个对象，或者删除不必要的属性等等。） >
您需要逐步更新显示随着新数据的到来。这意味着你需要类似的东西 html 将新编译的var ta_result = document.getElementById('ta_result'); function emits ( who, who_ ) {return function ( x ) { who.innerHTML = [who.innerHTML, who_ + " emits " + JSON.stringify(x)].join("\n"); };} function fillArrayWithNumbers(n) { var arr = Array.apply(null, Array(n)); return arr.map(function (x, i) { return {prop1: i, prop2:i, prop3:i} }); } var sampleObj = { beginIndex: "1", catId: "111", endIndex: "1", products: fillArrayWithNumbers(100) } console.log('sampleObj', sampleObj); var result$ = Rx.Observable .from(sampleObj.products) .bufferWithCount(10) .map(function(mini_array){return { beginIndex: sampleObj.beginIndex, catId: sampleObj.catId, endIndex: sampleObj.endIndex, products: mini_array }}) .do(emits(ta_result, 'result')); result$.subscribe(function(){ });附加到旧版本。

更新：对于分块数组，你可以看看这个jsfiddle：http://jsfiddle.net/429vw0za/

{{1}}

然后，您将拥有一个对象流，其大小为10的数组取自大小为100的数组。

使用RxJS Observable流JSON

1 个答案: