Javascript 流JSON与RxJS可观察

我试图了解一些关于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]

}

---

如果我理解得很好，有两个相关的观点需要说明：

您需要找到从该文件中获取对象流的方法 而不是当你读完那个文件时的一个大对象（

我想要
开始在页面上显示输入的数据

）。这个 其机制首先取决于源的结构（文件和文件读取机制） 而不是Rxjs（每一行都是一个可以引导信息的对象吗 显示等？）。一旦你有了“最小可显示的信息单元”，如果需要，你可以使用Rxjs来缓冲/处理它（你想为每个对象或每100个对象显示一些东西，还是删除不必要的属性等？）

您需要以增量方式更新显示 随着新数据的到来。这意味着你需要像

$resultList.html（$resultList.html（）+compiledTemplate（response））
将新编译的
html
附加到旧的

更新：对于数组分块，您可以查看以下JSFIDLE：

---

然后，从大小为100的数组中获得一个大小为10的数组的对象流。

所有内容都已正确设置，但getJSON会立即检索所有内容。从这个意义上说，responseStream不是一个流，它是一个完全成形的对象。从jQuery.getJSON解析的承诺只是页面的整个响应。只有当您同时从多个源（results.json、results2.json等）加载数据时，您的代码才会生成所需的操作。是否有方法开始将单个json文件转换为对象，并在该对象上的数组中循环？我正在寻找一种在数据进入和处理过程中以增量方式传输数据的方法。您实际上依赖于浏览器的行为。响应以具有统一大小的块的形式出现，但可以在数据对象中的任何位置开始和结束：[chunk 1，data:[{object 1}，{[ob][chunk 2，data:[{ject2}]{[object3…等等…broswer收集这些数据并将它们按正确的顺序排列。现在，你要问的是如何侵入http协议，这是一种过分的攻击。如果你想一个一个地解析这个对象，你需要用websocket连接到你的服务器并一个接一个地发送每个成员，这比一个get调用更流畅。St请记住最后一个答案，它很可能会将所有内容以一大块的形式发送出去，就我们而言，这将在瞬间到达。您仍然在寻找类似websocket的行为。（例如：）因此，如果流式传输不是一个好的途径，那么分块如何呢？因此，取该数组中的前10个并将其发送以显示。然后是下10个，依此类推。更像是以较小的分块缓冲/处理。您好，谢谢您的回答。1.）我需要循环该对象上的products数组，并在该对象上引入其他3个属性对象。因此将有一个较大的对象要使用。您的数组是否如此庞大以致于可以将其分块（或者一个项目的处理时间如此之长）？使用Rxjs，您可以轻松地将一个数组分块成一个“迷你”数组流。因此，您可以获得那个大对象并输出一个迷你数组流，您可以通过当前代码的数组调整版本来使用它。这对您有用吗？是的，那太完美了。如果我可以将该数组的块分块进行流式显示，那么我就可以获得pro页面上的管道更快，而不是等待所有100个管道同时显示。使用发布的Rxjs回答。但是，我想知道你是否真的必须使用Rxjs。你可以直接切片数组并进行简单循环。因此，你根本不需要流，只需要常规承诺和常规同步代码。另外：

flatMap

aAccepts承诺，因此您可以在RxJS 5中直接编写

返回jQuery.getJSON（requestUrl）

，将bufferWithCount更改为bufferCount..麻烦。。。

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