title: How to merge 2 td in a single td only in a row using jQuery?
body: <p>I am using jQuery to parse the JSON data and load into a table using AJAX but how can I make the td element merge in a single row only? Don't mind the position of the Header I'm just worried with the data.</p>
  
  <p>My Result:</p>
  
  <p><a href="https://i.stack.imgur.com/BaCOR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BaCOR.png" alt="enter image description here"></a></p>
  
  <p>This the correct:</p>
  
  <p><a href="https://i.stack.imgur.com/G5N84.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G5N84.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;script&gt;
          $(document).ready(function () {
              $.ajax({
                  type: "POST",
                  url: "@Url.Action("FlatType", "Home", new {id = TempData["Id"] })",
                  async: true,
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  cache: false,
                  success: function (data) {
                      let $thead = $('#myColumns'),
                          $tr = $('&lt;tr&gt;');
                      console.log(data);
                      data.data.forEach(col =&gt; {
                          $tr.append($('&lt;th&gt;').html(col === null || col === "" ? 0 : col));
                          console.log(col);
                      });
  
                      $thead.append($tr);
                  }
              });
  
              $.ajax({
                  type: "POST",
                  url: "@Url.Action("FlatTypeById", "Home", new {id = TempData["Id"] })",
                  async: true,
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  cache: false,
                  success: function (data) {
                      let $tbody = $('#myData');
                      data.data.forEach(row =&gt; {
                          let $tr = $('&lt;tr&gt;');
                          $tr.append(row.map(val =&gt; {
                              return $('&lt;td&gt;').html(val === null || val === "" ? 0 : val);
                          }));
                          $tbody.append($tr);
                      });
                  }
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>JSON Array Data: This is the COLUMN:</p>
  
  <pre><code>{
      "data": [
          [
              "ID",
              "TYPE",
              "TOTAL",
              "1 bed room",
              "2 bed room"
          ]
      ]
  }
  </code></pre>
  
  <p>JSON Array Data: This is the DATA:</p>
  
  <pre><code>{
      "data": [
          [
              "100",
              "Total Transaction Amount",
              "9812355000",
              "23397000",
              "13976000"
          ],
          [
              "100",
              "No. of units",
              "1268",
              "3",
              "2"
          ],
          [
              "100",
              "(Total sq.ft.)",
              "",
              "",
              ""
          ],
          [
              "100",
              "Avg. price",
              "7738450",
              "7799000",
              "6988000"
          ],
          [
              "100",
              "Avg. sq.ft.",
              "",
              "",
              ""
          ],
          [
              "100",
              "Max. price",
              "25494000",
              "9918000",
              "7318000"
          ],
          [
              "100",
              "Max. sq.ft",
              "",
              "",
              ""
          ],
          [
              "100",
              "Min. price",
              "5904000",
              "6465000",
              "6658000"
          ],
          [
              "100",
              "Min. sq.ft",
              "",
              "",
              ""
          ]
      ]
  }
  </code></pre>