CODEWITHSUNDEEP
javascript
Terla
Terla

Reputation: 3

.map(); doesnt show full data

i have a problem with my script.

I have a JSON data like this:

[{
     "Group": "General"
     "Properties": [{
          "name" : "blabla"
           "number" : 12
         }]
        }]

I would like to know how i can show "name" and "number" with .map(), i have this script: 

 data.map((n) => {
        return <div> 
            <Grid item xs={12}>
                 <div style={{padding:20}}>
                    <div style={{backgroundColor:colors.main, fontSize: 16, color:'#FFF', padding: 5}}>
                    <h5 >{n.group}</h5></div>
</Grid>}

And i was trying n.properties.name and bla doesnt work...

n.group work perfectly but i dont know how can i show another array inside of the first one.

thanks so much.

Upvotes: 0

Views: 34

Answers (1)

dysfunc
dysfunc

Reputation: 2008

Try this

render() {
  const data = [{
    "Group": "General",
    "Properties": [{
      "name" : "blabla",
      "number" : 12
    }]
  }];

  const items = data.map((n) => {
    var props = n.Properties.map((props, index) => <div key={index}>{props.name} {props.number}</div>);

    return (
      <Grid item xs={12}>
        <div style={{padding:20}}>
          <div style={{ backgroundColor: colors.main, fontSize: 16, color:'#fff', padding: 5 }}>
            <h5>{n.Group}</h5>
            <div>{props}</div>
          </div>
        </div>
      </Grid>
    )
  });

  return <div>{items}</div>;
}

Upvotes: 1

Related Questions