创建复杂的表结构

Question

I have the following structure:

[{
  "ID": "1",
  "Country": "Italy",
  "Animals": {
    "dog": {
      "1": {
        "name": "Bailey",
        "age": "5"
      },
      "2": {
        "name": "Charlie",
        "age": "3"
      }
    },
    "cat": {
      "1": {
        "name": "Luna",
        "age": "7"
      },
      "2": {
        "name": "Biscuit",
        "age": "1"
      }
    }
  }
}, {
  "ID": "4",
  "Country": "France",
  "Animals": {
    "cat": {
      "1": {
        "name": "Chloe",
        "age": "8"
      },
      "2": {
        "name": "Jasper",
        "age": "2"
      }
    },
    "mouse": {
      "1": {
        "name": "Skittles",
        "age": "7"
      },
      "2": {
        "name": "Indy",
        "age": "9"
      },
      "3": {
        "name": "Goldie",
        "age": "3"
      }
    }
  }
}, {
  "ID": "6",
  "Country": "Spain",
  "Animals": {
    "cat": {
      "1": {
        "name": "Toby",
        "age": "7"
      },
      "2": {
        "name": "Simba",
        "age": "2"
      }
    }
  }
}, {
  "ID": "9",
  "Country": "Germany",
  "Animals": {
    "mouse": {
      "1": {
        "name": "Crimsin",
        "age": "1"
      }
    }
  }
}]

I want to display it as the following table:

---

This is my approach:

$.each(arr, function(key, value) {
  var rowspan = Object.keys(arr[key].Animals).length;

  var tr = "";
  c = 0;
  $.each(value, function(key2, value2) {
    if (key2 != "animals") {
      if (rowspan < 1) {
        rowspan = 1;
      }
      tr += '<td rowspan=' + rowspan + '>' + value2 + '</td>';
    } else {
      $.each(value2, function(key3, value3) {
        var tr2_temp = "";

        tr2_temp += "<td>" + key3 + "</td>";
        $.each(value3, function(key4, value4) {
          tr2_temp += "<td>" + value4 + "</td>";
        });

        if (c == 0) {
          $('#myTab tr:eq(' + parseInt(key + 1) + ')').append(tr2_temp)
          c++;
        } else {
          $('#myTab tr:eq(' + parseInt(key + 1) + ')').after(tr2_temp)
          c = 0;
        }
      });
    }
  });
  console.log(tr)
  $('#myTab > tbody:last-child').append('<tr>' + tr + '</tr>');
});

But it doesn't help.

Is there a way to do it dynamically, so that I don't have so specify every column?
Please note that this is a simplified example. In the real case there much more attributes.

Answer 1

 var arr = [{ "ID": "1", "Country": "Italy", "Animals": { "dog": { "1": { "name": "Bailey", "age": "5" }, "2": { "name": "Charlie", "age": "3" } }, "cat": { "1": { "name": "Luna", "age": "7" }, "2": { "name": "Biscuit", "age": "1" } } } }, { "ID": "4", "Country": "France", "Animals": { "cat": { "1": { "name": "Chloe", "age": "8" }, "2": { "name": "Jasper", "age": "2" } }, "mouse": { "1": { "name": "Skittles", "age": "7" }, "2": { "name": "Indy", "age": "9" }, "3": { "name": "Goldie", "age": "3" } } } }, { "ID": "6", "Country": "Spain", "Animals": { "cat": { "1": { "name": "Toby", "age": "7" }, "2": { "name": "Simba", "age": "2" } } } }, { "ID": "9", "Country": "Germany", "Animals": { "mouse": { "1": { "name": "Crimsin", "age": "1" } } } }]; var $tbody = $('#myTab > tbody:last-child'); arr.forEach(d => { var tds = ''; for (var k in d) { if (typeof d[k] !== 'object') { var rs = Object.values(d.Animals).map(o => Object.keys(o).length).reduce((v, s) => v + s, 0); tds += `<td rowspan="${rs}">${d[k]}</td>`; } else { for (var kk in d[k]) Object.values(d[k][kk]).forEach((dd, i) => { var tds3 = `<td>${kk + (i+1)}</td>`; Object.values(dd).forEach(val => tds3 += `<td>${val}</td>`); $tbody.append(`<tr>${tds + tds3}</tr>`); tds = ''; }); } } });

 table, table td { border: 1px solid; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTab"> <thead><tr><td>ID</td><td>Country</td><td>Animals</td><td>Name</td><td>Age</td></tr></thead> <tbody></tbody> </table>