jquery - 从对象数组以特定方式显示表格

Question

我有一个对象数组，我想以特定格式在表格中显示数据。我想以这种格式显示表格。

但我无法做到这一点。有人可以帮我解决这个问题吗？

下面是对象

    var data = [
     { 
       1 :[ 
           {
        process:"p1",
        value:-6
     },
    {
        process: "p1",
        value: 5
    },
    {
        process: "p1",
        value: 10
    },
    {
        process: "p1",
        value: -3
    }

    ],
    2: [
        {
            process: "p2",
            value: 5
        },
        {
            process: "p2",
            value: 15
        },
        {
            process: "p2",
            value: 24
        },
        {
            process: "p2",
            value: -56
        }

    ]
 }
]

Answer 1

您可以使用 $.each 循环遍历数据，然后在循环下的每次迭代中获取值并将值附加到相同的变量，即:table 然后最后是 将 数据附加到任何 div。工作代码:

var data = [{
  "1": [{
      "process": "p1",
      "value": -6
    },
    {
      "process": "p1",
      "value": 5
    },
    {
      "process": "p1",
      "value": 10
    },
    {
      "process": "p1",
      "value": -3
    }

  ],
  "2": [{
      "process": "p2",
      "value": 5
    },
    {
      "process": "p2",
      "value": 15
    },
    {
      "process": "p2",
      "value": 24
    },
    {
      "process": "p2",
      "value": -56
    }

  ]
}];
var table = "<table class='table table-bordered'> <thead><tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th></tr> </thead>";
//looping through data
$.each(data, function(i, e) {
  $.each(e, function(key, arr) {

    table += "   <tbody>";
    //here key can be 1 or 2 i.e 1=> p1 and 2=> p2
    if (key == 1)
      table += "<tr><th>P1+</th>";
    else
      table += "<tr><th>P2+</th>";
    //looping through data in array i.e : value and proccess
    $.each(arr, function(index, obj) {

      //append data to variable
      table += "<td>" + (obj.value) + "</td>";

    });
    table += "</tr>";
  });
})
table += " </tbody><table>";
//append variable to id = "table"
$("#table").append(table);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
  <div id="table">
  </div>
</div>