user1780729 user1780729 - 3 months ago 7
Javascript Question

How to loop try data in JSX

Hello I have this data that I want to display in my UI.
I want to be able to loop try the data and display ProductTypeID and ProductTypeName in a li's

I would like to be able to loop inside jsx

I cant wrap my head around it, could you guys give me a hint? I am not really good working with data and looping tru it.

[{
"ProductTypeID": 14,
"ProductTypeName": "ItemName1",
"ProductTypeImageUrl": "",
"ProductTypeThumbUrl": "",
"ProductTypeIconUrl": "",
"IsActive": 1,
"ProductTypeBlueImage": null,
"Is3HourRent": null
}, {
"ProductTypeID": 1,
"ProductTypeName": ItemName2",
"ProductTypeImageUrl": "",
"ProductTypeThumbUrl": "",
"ProductTypeIconUrl": "",
"IsActive": 1,
"ProductTypeBlueImage": null,
"Is3HourRent": false
}, {
"ProductTypeID": 10,
"ProductTypeName": "ItemName3",
"ProductTypeImageUrl": "",
"ProductTypeThumbUrl": "",
"ProductTypeIconUrl": "",
"IsActive": 1,
"ProductTypeBlueImage": null,
"Is3HourRent": true
}]

Answer
render() {
 var data = [{
  'ProductTypeID': 14,
  'ProductTypeName': 'ItemName1'
 }, 
 {
  'ProductTypeID': 15,
  'ProductTypeName': 'ItemName2'
 }];

 return (<ul>
  {data.map(function(item) {
   return (<li key={item.ProductTypeID}>
     <span>ID: {item.ProductTypeID}</span>
     <span>Name: {item.ProductTypeName}</span>
   </li>);
  })}
 </ul>);
}