RXJS，将新的 key:value 添加到嵌套的可观察对象

Question

我是 rxjs 的新手，我不知道如何做我需要的。我需要递归地添加一对active:true。

我有这个数据结构来自 api 作为可观察的：

var data = [
  {
    name: "hom",
    subcategories: [
      { name: "reb" },
      { name: "nov" },
      { name: "otr" }
    ]
  },
  {
    name: "muj",
    subcategories: [
      { name: "REB" },
      { name: "NOV" },
      { name: "OT" }
    ]
  },
  {
    name: "ni",
    subcategories: [
      { name: "REB", subcategories: [
        {name: "rebanis"},
        {name: "rebawos"}] },
      { name: "NOV", subcategories: [
        {name: "novebanis"},
        {name: "novrebawos"}] },
      { name: "OT", subcategories: [
        {name: "otrebanis"},
        {name: "otrebawos"}] 
      }
    ]
  }
];

我想要的是在每个有子类别的级别上添加一个 active:true，我不知道可以嵌套多少个子类别。

这是我想要的结果：

var data = [
  {
    active: true,
    name: "hom",
    subcategories: [
      { name: "reb" },
      { name: "nov" },
      { name: "otr" }
    ]
  },
  {
    active: true,
    name: "muj",
    subcategories: [
      { name: "REB" },
      { name: "NOV" },
      { name: "OT" }
    ]
  },
  {
    name: "ni",
    active: true,
    subcategories: [
      { name: "REB", active: true, subcategories: [
        {name: "rebanis"},
        {name: "rebawos"}] },
      { name: "NOV", active: true, subcategories: [
        {name: "novebanis"},
        {name: "novrebawos"}] },
      { name: "OT", active: true, subcategories: [
        {name: "otrebanis"},
        {name: "otrebawos"}] 
      }
    ]
  }
];

我试过这样的事情：

const req = of(data)
  .pipe(
    map(data => {
      const transformedData = Object.keys(data).map(key =>
        Object.assign(data[key], { active: true })
      );
      return transformedData;
    })
  )
  .subscribe(output => console.log(output));

但是结果不清楚，只影响第一层，不影响嵌套。

Answer 1

问题与rxJs和Observable无关，是一个Array的转换问题

我会尝试这样的事情

data.map(el => {
  if(el.subcategories && el.subcategories.lenght > 0) {
     const newEl = {...el};
     newEl.active = true;
     return newEl;
  }
  return {...el}
})

请注意，我在这里使用了某种不变性，因此我在循环中创建了新元素。如果您的情况不需要这样做，您可以像这样简化代码

data.map(el => {
  if(el.subcategories && el.subcategories.lenght > 0) {
     el.active = true;
  }
  return el
})

Answer 2

你可以在递归函数中使用map:

const data = [ { name: "hom", subcategories: [ { name: "reb" }, { name: "nov" }, { name: "otr" } ] }, { name: "muj", subcategories: [ { name: "REB" }, { name: "NOV" }, { name: "OT" } ] }, { name: "ni", subcategories: [ { name: "REB", subcategories: [ {name: "rebanis"}, {name: "rebawos"}] }, { name: "NOV", subcategories: [ {name: "novebanis"}, {name: "novrebawos"}] }, { name: "OT", subcategories: [ {name: "otrebanis"}, {name: "otrebawos"}] } ] } ];

const addNewProp=data=>data.map(o=>o.subcategories ? ({...o, active:true, subcategories: addNewProp(o.subcategories)}) : o);

console.log(addNewProp(data));

RXJS，将新的 key:value 添加到嵌套的可观察对象

RXJS, add new key:value to nested observable

javascript

recursion

observable

rxjs