【问题标题】:Turn nested objects into single array of values将嵌套对象转换为单个值数组
【发布时间】:2017-03-27 18:52:27
【问题描述】:

我有一些看起来像这样的 json 数据:

{ 
'harry-test-com': { 'quoteID234324': {'day': 'tuesday', 'cost':'1000'}},
'sam-imaginarydomain-com': {
'quoteID13211': {'day': 'wednesday', 'cost': '500'},
'quoteID534534': {'day': 'monday', 'cost': '300'}
 }
};

所以基本上我们的报价是由用户安排的,以便于过滤。但是,在一个页面上,我想在列表中显示所有引号。所以我想遍历每个用户,获取他们的引号,并将它们添加到按键排序的对象中,如下所示:

'quoteID234324': {'day': 'tuesday', 'cost':'1000'}, 
'quoteID13211': {'day': 'wednesday', 'cost': '500'},
'quoteID534534': {'day': 'monday', 'cost': '300'}

我认为 lodash 无疑会对此有用,但我只是不知道从哪里开始?任何帮助将不胜感激!干杯

【问题讨论】:

    标签: reactjs ecmascript-6 lodash


    【解决方案1】:

    您可以使用Object.keys()Object.assign() 将对象缩减为新对象:

    const obj = {
      'harry-test-com': {
        'quoteID234324': {
          'day': 'tuesday',
          'cost': '1000'
        }
      },
      'sam-imaginarydomain-com': {
        'quoteID13211': {
          'day': 'wednesday',
          'cost': '500'
        },
        'quoteID534534': {
          'day': 'monday',
          'cost': '300'
        }
      }
    };
    
    const result = Object.keys(obj).reduce((days, user) => Object.assign(days, obj[user]), {});
    
    console.log(result);

    不太受支持的选项是将Object.values()Object.assign 一起使用:

    const obj = {
      'harry-test-com': {
        'quoteID234324': {
          'day': 'tuesday',
          'cost': '1000'
        }
      },
      'sam-imaginarydomain-com': {
        'quoteID13211': {
          'day': 'wednesday',
          'cost': '500'
        },
        'quoteID534534': {
          'day': 'monday',
          'cost': '300'
        }
      }
    };
    
    const result = Object.assign({}, ...Object.values(obj));
    
    console.log(result);

    【讨论】:

    • 太棒了,这正是我所需要的,非常感谢!
    • 我选择了第二个,因为它更简洁一些,因为我们可能会在每个对象中添加很多键。然而 eslint 对我大喊大叫要使用 spread 所以我研究了它并最终得到了这个:` const result = Object.assign(...Object.values(obj)); `
    • 更新了答案以创建一个新对象,因此它不会改变原始数据('harry-test-com' 对象)。
    • 太棒了!我一直在试图弄清楚为什么我的 componentWillReceiveProps 没有触发,并认为这一定与改变状态有关!救生员...
    • 嗯,它仍然没有触发。我的 redux reducer 的结构是这样的: const quotes = action.payload; const 引号列表 = Object.assign({}, ...Object.values(quotes));返回{ ...状态,引号列表};知道为什么这不会导致 componentWillReceiverProps 触发吗?
    猜你喜欢
    • 2021-11-15
    • 2019-04-26
    • 2018-03-08
    • 1970-01-01
    • 2015-03-26
    • 2019-01-31
    相关资源
    最近更新 更多