RxJS处理集合：为文章添加description并生成扁平化数组遇问题

我来帮你梳理下问题所在，顺便给出正确的实现方式~

首先看你代码里的几个小问题：

• 你在map里已经把section.articles转成了带描述的文章数组，但后面的mergeMap却去取x.articles——这时候x就是你刚处理完的文章数组，它根本没有articles属性，这肯定拿不到正确结果
• 你代码里写的是section.sectionName，但你的需求是要添加description属性，这里应该是变量名写错了

正确实现方式一：先处理再扁平化 #

json$.pipe(
  // 过滤掉count不大于0的分区
  filter(section => section.count > 0),
  // 给当前分区的每篇文章添加上父级的description
  map(section => 
    section.articles.map(article => ({
      ...article, // 展开原文章的所有属性
      description: section.description // 添加上父级描述
    }))
  ),
  // 把每个分区的文章数组扁平化为单个文章对象的流
  mergeMap(articlesWithDescription => articlesWithDescription)
).subscribe(article => console.log(article));

更简洁的实现方式：mergeMap直接处理展开 #

其实可以把map和mergeMap合并成一步，直接在mergeMap里完成文章的属性添加和数组展开：

json$.pipe(
  filter(section => section.count > 0),
  // mergeMap会自动把返回的数组展开成单个对象的流
  mergeMap(section => 
    section.articles.map(article => ({
      ...article,
      description: section.description
    }))
  )
).subscribe(article => console.log(article));

这两种方式都能实现你的需求：最终得到一个扁平化的文章数组，每篇文章都带有对应父级元素的description属性。

内容的提问来源于stack exchange，提问作者Norsk