I am working on building a web application using reactJS. We should display the product users subscribed to. Number of products each user subscribes to differs. For Example, here is the response :
{ "data" : [ { "user": "user1", "subscriptions": { "user1_product_1" : 20, "user1_product_2": 25 } }, { "user": "user2", "subscriptions": { "user2_product_1": 30, "user2_product_2": 25, "user2_product_3": 50, "user2_product_4": 50 } } ] }
So, the subscription data is dynamic. How can I display the above data in tabular data as follow :Mock User can subscribe to any number of products.. as of now we don’t have users who subscribed to more than 4 products.
Advertisement
Answer
First of all , your data is a mess and it has not proper structure. correct it first and then this should might help you:
let data = [ { user: "user1", subscriptions: { user1_product_1: 20, user1_product_2: 25, }, }, { user: "user2", subscriptions: { user2_product_1: 30, user2_product_2: 25, user2_product_3: 50, user2_product_4: 50, }, }, ]; const TabularData = (props) => ( <table> {props.data.map((user) => ( <tr> {Object.keys(user.subscriptions).map((user_product) => ( <td>{user.subscriptions[user_product]}</td> ))} </tr> ))} </table> );