使用RxJS Observable流JSON [英] Stream JSON with RxJS Observable

问题描述

我试图了解有关RxJ的一些信息.我想做的是消耗一些JSON数据，并在传入时立即开始在DOM上呈现这些数据.我已经设置了流请求，响应和显示.它输出的一切都很好，但是可以一次完成所有操作，而不会随着时间的流逝而完成.

I'm trying to understand a few things about RxJs. What I would like to do is consume some JSON data and immediately begin to render that data on the DOM as it's coming in. I've setup the stream request, response, and display. It's outputting every just fine but it's doing it all at once and not over time.

我想开始在页面上显示数据，而不是等待整个文件完成然后立即显示，这将导致较长的等待时间.

I want to start showing the data on the page as its coming in, instead of waiting for the whole file to complete then show at once which would create a long wait time.

//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]

}

推荐答案

如果我理解得很清楚，有两点需要说明:

If I understand well, there are two relevant points to make:

1. 您需要找到一种方法来获取该文件中的对象流 当您完成读取该文件(I want to start showing the data on the page as its coming in)时，而不是一个大对象.这 其机制将首先取决于源的结构(文件和文件读取机制) 比在Rxjs上(每一行都是可以导致信息的对象 显示等?).一旦有了最小的可显示信息单元"，就可以使用Rxjs对其进行缓冲/处理(是否要为每个对象或每100个对象显示某些内容，或删除不必要的属性等?)
2. 您需要逐步更新显示 随着新数据的到来.那意味着你需要类似的东西 $resultList.html($resultList.html() + compiledTemplate(response)); 将新编译的html附加到旧版本.

1. you need to find a way to have a stream of objects from that file instead of one big object when you finish reading that file (I want to start showing the data on the page as its coming in). The mechanics of that would depend first on the structure of the source (file and file reading mechanism) than on Rxjs (is every line an object that can lead to information display etc.?). Once you have that 'minimum displayable unit of information' you can use Rxjs to buffer/process it if need be (do you want to display something for each object, or each 100 objects, or remove uncessary attributes etc.?)
2. you need to update your display incrementally as new data arrive. That means you need something like $resultList.html($resultList.html() + compiledTemplate(response)); to append the new compiled html to the old one.

更新:对于对数组进行分块，您可以查看以下jsfiddle: http://jsfiddle.net/429vw0za /

UPDATE : for chunking an array, you can have a look at this jsfiddle : http://jsfiddle.net/429vw0za/

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(){    });

然后您将获得一个大小为10的对象流，该对象流是从大小为100的数组中提取的.

You will then have a stream of objects with arrays of size 10 taken from the array of size 100.

这篇关于使用RxJS Observable流JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！