JS嵌套reduce

Question

问题是如何遍历对象数组，并且 select 仅遍历那些从关键选项（再次是对象数组）的值中具有 is_enabled=true 的对象。

这是我正在查看的数据结构：

[
    {
        'id': 1,
        'label': 'Label1',
        'options': [
            {
                'id': 1.1,
                'label': 'Label1.1',
                'is_enabled': true
            },
            {
                'id': 1.2,
                'label': 'Label1.2',
                'is_enabled': false
            },
        ],
    },
    {
        'id': 2,
        'label': 'Label2',
        'options': [
            {
                'id': 2.1,
                'label': 'Label2.1',
                'is_enabled': false
            },
            {
                'id': 2.2,
                'label': 'Label2.2',
                'is_enabled': false
            },
        ],
    },
    {
        'id': 3,
        'label': 'Label3',
        'options': [
            {
                'id': 3.1,
                'label': 'Label3.1',
                'is_enabled': true
            },
            {
                'id': 3.2,
                'label': 'Label3.2',
                'is_enabled': true
            },
        ],
    },
]

这是我正在寻找的输出：

[
    {
        'id': 1,
        'label': 'Label1',
        'options': [
            {
                'id': 1.1,
                'label': 'Label1.1',
                'is_enabled': true
            },
        ],
    },
    {
        'id': 3,
        'label': 'Label3',
        'options': [
            {
                'id': 3.1,
                'label': 'Label3.1',
                'is_enabled': true
            },
            {
                'id': 3.2,
                'label': 'Label3.2',
                'is_enabled': true
            },
        ],
    },
]

提前致谢

Answer 1

您可以使用 reduce 并在其回调中使用 filter 获取 options 数组，其中 is_enabled 为真

let data = [{
    'id': 1,
    'label': 'Label1',
    'options': [{
        'id': 1.1,
        'label': 'Label1.1',
        'is_enabled': true
      },
      {
        'id': 1.2,
        'label': 'Label1.2',
        'is_enabled': false
      },
    ],
  },
  {
    'id': 2,
    'label': 'Label2',
    'options': [{
        'id': 2.1,
        'label': 'Label2.1',
        'is_enabled': false
      },
      {
        'id': 2.2,
        'label': 'Label2.2',
        'is_enabled': false
      },
    ],
  },
  {
    'id': 3,
    'label': 'Label3',
    'options': [{
        'id': 3.1,
        'label': 'Label3.1',
        'is_enabled': true
      },
      {
        'id': 3.2,
        'label': 'Label3.2',
        'is_enabled': true
      },
    ],
  },
];

const newData = data.reduce((acc, curr) => {
  // get options for which `is_enabled` is true
  const getEnabledArr = curr.options.filter(item => item.is_enabled);
  if (getEnabledArr.length > 0) {
    const newVal = Object.assign({}, curr, {
      options: getEnabledArr
    });
    acc.push(newVal)
  }
  return acc;
}, []);
console.log(newData)

Answer 2

你可以像这样用 map 来做：

var data=[ { 'id': 1, 'label': 'Label1', 'options': [ { 'id': 1.1, 'label': 'Label1.1', 'is_enabled': true }, { 'id': 1.2, 'label': 'Label1.2', 'is_enabled': false }, ], }, { 'id': 2, 'label': 'Label2', 'options': [ { 'id': 2.1, 'label': 'Label2.1', 'is_enabled': false }, { 'id': 2.2, 'label': 'Label2.2', 'is_enabled': false }, ], }, { 'id': 3, 'label': 'Label3', 'options': [ { 'id': 3.1, 'label': 'Label3.1', 'is_enabled': true }, { 'id': 3.2, 'label': 'Label3.2', 'is_enabled': true }, ], }];

var result = data.map(({options, ...rest})=> ({...rest, options:options.filter(val=>val.is_enabled)}));

console.log(result);

希望对您有所帮助。谢谢！

Answer 3

// data is your initial data

data.reduce((acc, obj) => {
 const enabledOptions = obj.options.filter(option => option.is_enabled);
 if (enabledOptions.length !== 0) {
   acc.push({
     ...obj,
     options: enabledOptions
   });
 }
 return acc;
}, []);

JS嵌套reduce

JS nested reduce

javascript

reduce

frontend