Display dynamic arraylist using reactJS

Question

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.

Answer 1

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