用一个标签循环对象

Question

新的反应和尝试循环一些数据。我有一个对象数组，每个对象只有一个属性，另一个数组。我怎样才能参考＆＃34;硬币＆＃34;和＆＃34;账单＆＃34;在循环浏览这些数据的同时？

这来自我的容器控制器

const denominations = [
  {
    coins: [
      { name: 'Penny', namePlural: 'Pennies', label: '1¢', value: .01, },
      { name: 'Nickel', namePlural: 'Nickels', label: '5¢', value: .05, },
      { name: 'Dime', namePlural: 'Dimes', label: '10¢', value: .10, },
      { name: 'Quarter', namePlural: 'Quarters', label: '25¢', value: .25, }
    ]
  },
  {
    bills: [
      { name: 'Dollar', namePlural: 'Dollars', label: '$1', value: 1, },
      { name: 'Five', namePlural: 'Fives', label: '$5', value: 5, },
      { name: 'Ten', namePlural: 'Tens', label: '$10', value: 10, },
      { name: 'Twenty', namePlural: 'Twentys', label: '$20', value: 20, },
      { name: 'Fifty', namePlural: 'Fiftys', label: '$50', value: 50, },
      { name: 'Hundred', namePlural: 'Hundreds', label: '$100', value: 100, }
    ]
  }
];

这是在哑控制器内部。

let denoms = props.denominations.map(function (denom) {
    return (
        <div className="col" key={denom}>test</div>
    )
});

在Angular中，我习惯使用function (value, key)语法。如何提取“硬币”的键？和＆＃39;账单＆＃39;？

Answer 1

您可以使用Object.keys方法获取对象的键，并使用返回的数组再次使用map。

let denoms = props.denominations.map(function (denom) {
  return (
    Object.keys(denom).map(function(key){
      return (<div className="col" key={key}>test</div>)
    })
  );
});

如果你想获得值仍然可以访问这样的值。

denom[key]

修改

如果要遍历每个键中的所有对象，可以再次使用带有值的map，如下所示。

let denoms = props.denominations.map(function (denom) {
  return (
    Object.keys(denom).map(function(key){
      return denom[key].map(function(item){
        return (<div className="col" key={item}>{item.name}</div>)
      })
    })
  );
});

或者，如果您不关心密钥，也可以使用Object.values

let denoms = props.denominations.map(function (denom) {
  return (
    Object.values(denom).map(function(value){
      return value.map(function(item){
        return (<div className="col" key={item}>{item.name}</div>)
      })
    })
  );
});