I wanted to achieve similar result as shown in below image

**Expected result:**

[![enter image description here](https://i.stack.imgur.com/8dCFs.png)](https://i.stack.imgur.com/8dCFs.png)

what I'm expecting is if it is done using **recursion** most welcome

I will recieve huge json from backend with `user_data` having 50 `objects`

**Note**:recursive approach is most welcome

here is what I have tried:

```js
var data = [{
  "user_data": [{
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "hulk"
}, {
  "user_data": [ {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "gomu"
}];

var tableStr = '';
data.forEach((obj) => {
   var userData = obj.user_data;
   userData.forEach((o) => {
      tableStr += '<tr rowspan="'+userData.length+'"><td>'+o.time1+'</td><td>'+o.time2+'</td><td>'+o.amount+'</td></tr>';
   });
});

$('#user').html(tableStr);
```

```css
table { 
       border-collapse: collapse;
   }

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="user">
    <thead>
        <tr>
          <th>User Name</th>
          <th>Time 1</th>
          <th>Time 2</th>
          <th>Amount</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
```