對象es6過濾器的雙嵌套數組

Question

我想過濾出嵌套的對象數組，但卡在過濾器部分。

如何去除其中一個標記？

this.state = {
  data: [
    {
      id: 1,
      name: "Main",
      subs: [
        {
          id: "jay",
          name: "Jay",
          mark: [
            {
              id: "5a5d84b94a074c49ef2d4553",
              name: 100
            },
            {
              id: "5a5d84b94a074119ef2d4553",
              name: 70
            }
          ]
        }
      ]
    }
  ]
};

https://codesandbox.io/s/p39momxzp7

我嘗試使用es6，因為它更具可讀性。

預期產量

data: [
  {
    id: 1,
    name: "Main",
    subs: [
      {
        id: "jay",
        name: "Jay",
        mark: [
          {
            id: "5a5d84b94a074119ef2d4553",
            name: 70
          }
        ]
      }
    ]
  }
]

Answer 1

由於您的數據結構中有多個嵌套數組，因此您需要多次使用forEach

data.forEach( s =>  //iterate data
      s.subs.forEach( t => //iterate subs
         ( t.mark = t.mark.slice( 1, 2 ) ) ) ); //slice the second value out

演示版

 var data = [{ id: 1, name: "Main", subs: [{ id: "jay", name: "Jay", mark: [{ id: "5a5d84b94a074c49ef2d4553", name: 100 }, { id: "5a5d84b94a074119ef2d4553", name: 70 } ] }] }]; data.forEach(s => s.subs.forEach(t => (t.mark = t.mark.slice(1,2)))); console.log(JSON.stringify(data, 0, 4)) 

如果應該選擇最后一個值 ？

data.forEach( s =>  //iterate data
      s.subs.forEach( t => //iterate subs
         ( t.mark = t.mark.slice( -1 ) ) ) ); //slice the last value out

Answer 2

如果您嘗試按給定id過濾相關mark ，
您可以結合使用Array#map和Array#filter來實現它：

請注意，我也在使用“ 對象剩余/擴展屬性”提案 （階段4）

運行示例

 const state = { data: [{ id: 1, name: "Main", subs: [{ id: "jay", name: "Jay", mark: [{ id: "5a5d84b94a074c49ef2d4553", name: 100 }, { id: "5a5d84b94a074119ef2d4553", name: 70 }] }] }] }; const mark_id = '5a5d84b94a074119ef2d4553'; const nextState = { ...state, data: state.data.map(obj => { const filteredSubs = obj.subs.map(sub => { const markById = sub.mark.filter(m => m.id === mark_id); return { ...sub, mark: markById } }); return { ...obj, subs: filteredSubs } }) }; console.log(nextState); 

Answer 3

您甚至可以使用lodash，其中包含許多可以輕松處理的方法。

檢查這是否是您想要的。 （有一個很好的范圍可以對其進行重構，但是在此之前，您想了解這是否是您要找的東西）

以下是已在其中使用的代碼。

let inputId = "5a5d84b94a074c49ef2d4553";
    let filteredData =_.each(_.cloneDeep(data), function(value, key1) {
      _.each(value.subs, function(valueSubs, key2) {
        var finalSubMark = _.find(valueSubs.mark, function(eachMark) {
          return eachMark.id == inputId;
        });
        _.set(valueSubs, "mark", finalSubMark);
      });
    });

https://codesandbox.io/s/v065w05rly