对象es6过滤器的双嵌套数组

时间:2018-02-13 06:48:09

标签: javascript reactjs ecmascript-6

我想过滤掉嵌套的对象数组,但是却停留在过滤器部分。

如何删除其中一个标记?

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

3 个答案:

答案 0 :(得分:0)

由于您的数据结构中有多个嵌套数组,因此您需要多次使用forEach

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

<强>演示

&#13;
&#13;
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))
&#13;
&#13;
&#13;

如果应该选择最后一个值

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

答案 1 :(得分:0)

如果您尝试按给定的mark过滤相关id,请执行 您可以合并Array#mapArray#filter来实现它:

请注意,我也在使用Object Rest/Spread Properties proposal(第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);

答案 2 :(得分:0)

您甚至可以使用包含许多可以轻松处理的方法的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