javascript - 尝试在 React 中迭代 JSON 对象

Question

我正在尝试为我拥有的每个 JSON 值显示一个切换复选框。这就是 element

的 json 对象的样子

{
    "sourceIP": {
        "Primary": ["237.100.100.3", "238.0.4.8"],
        "Secondary": ["237.0.1.178", "237.1.1.91"]
    },
    "multicastIP": {
        "Primary": ["10.208.153.129", "238.0.4.8"],
        "Secondary": ["10.208.133.58", "238.0.4.8"]
    }
}

所以我想迭代元素而不是像这样对其进行硬编码:

const CustomToggle = ({ element}) => (
<List divided verticalAlign='middle'>
    <Segment textAlign='left' style={{paddingLeft: '7.5em'}}>
        <Checkbox
            toggle
            label={(JSON.stringify(element.sourceIP.Primary[0]))}
            value={(JSON.stringify(element.sourceIP.Primary[0]))}
        />
        <Checkbox
            toggle
            label={(JSON.stringify(element.sourceIP.Primary[1]))}
            value={(JSON.stringify(element.sourceIP.Primary[1]))}
        />
        <Checkbox
            toggle
            label={(JSON.stringify(element.sourceIP.Secondary[1]))}
            value={(JSON.stringify(element.sourceIP.Secondary[1]))}
        />
    </Segment>

</List>

);

我一直在尝试 forEach 和 .map 但这些似乎都不起作用。我不想对 element 中的每个 json 值进行硬编码。我怎样才能迭代我的元素 JSON 对象？

Answer 1

Object.keys(element).reduce((a,c) => a.concat(...Object.values(element[c])),[])

this transformed data gives array of ip adtresses. So, now you can iterate it

const CustomToggle = ({ element}) => {
  const elements = Object.keys(element).reduce((a,c) => a.concat(...Object.values(element[c])),[]); 
  return (
    <List divided verticalAlign='middle'> 
       <Segment textAlign='left' style={{paddingLeft: '7.5em'}}>
          {elements.map(ip => <Checkbox toggle label={ip} value={ip} />}
        </Segment> 
     </List>
  )
}