Trying to iterate over a JSON object in React

Question

I am trying to display a toggle checkbox for every JSON value I have. This is what the json object looks like for element

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

So I would like to iterate through element instead of hardcoding it like this:

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>

);

I have been trying to forEach and .map but none of this seems to work. I don't want to have to hardcode every json value in element. How can I just iterate through my element JSON object?

There is no such thing as a JSON object. JSON is a string format. — ggorlen
– ggorlen, Commented Apr 9, 2020 at 22:45
Is the structure/shape of the element JSON object same every time? — rzwnahmd
– rzwnahmd, Commented Apr 9, 2020 at 23:27
Yes it is always the same object with same field names. The arrays are also static in Primary and Secondary. They always have 2 values [0] and [1] — lakeIn231
– lakeIn231, Commented Apr 9, 2020 at 23:31

score 2 · Accepted Answer · 2020-04-10 07:09:08Z

2

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

edited Apr 10, 2020 at 7:09

answered Apr 9, 2020 at 23:48

user13198697

Sign up to request clarification or add additional context in comments.

Comments

rzwnahmd · Accepted Answer · 2020-04-09 23:38:03Z

0

Here try this, let me know if it helps :)

const CustomToggle = ({ element }) => (
  <List divided verticalAlign="middle">
    <Segment textAlign="left" style={{ paddingLeft: "7.5em" }}>
      {Object.keys(element).map(key => {
        return [...element[key].Primary, ...element[key].Secondary].map(x => {
          <Checkbox toggle label={x} value={x} />;
        });
      })}
    </Segment>
  </List>
);

answered Apr 9, 2020 at 23:38

rzwnahmd

1,0825 silver badges8 bronze badges

Comments

Luís Ramalho · Accepted Answer · 2020-04-09 23:49:29Z

You can for example do something like the snipped below:

const List = ({ divided, rest }) => <div {...rest} />;
const Checkbox = ({ toggle, ...props }) => (
  <div>
    <input type="checkbox" {...props} />
    <label>{props.label}</label>
  </div>
);
const Segment = (props) => <div {...props} />;

const CustomToggle = ({ element }) => (
  <div>
    {element.map((ip) => (
      <Checkbox toggle label={ip} value={ip} />
    ))}
  </div>
);

function App() {
  let result = `{
        "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"]
        }
    }`;
  let data = JSON.parse(result);
  let ips = [];
  Object.keys(data).map((source) => {
    Object.keys(data[source]).map((type) => {
      ips.push(...data[source][type]);
    });
  });
  return <CustomToggle element={ips} />;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

So, you'll parse the data, then iterate over it to get the IPs and then pass those as a prop to the CustomToggle. The code above is just an example to get you going as I don't know what your List, Checkbox and Segment components look like.

The reasoning is that CustomToggle should not know or care what the data should look like, it just knows how to render a custom toggle based on some string that it receives, in this case the ip. You should however make sure that each Checkbox has a unique key.

Collectives™ on Stack Overflow

Trying to iterate over a JSON object in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related