отображать таблицу определенным образом из массива объектов

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, а затем, наконец, append данные к любому div.Working code:

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>

Answer 2

.each () - это хорошо, но вы можете использовать что-то, что я считаю более простым.Шаблонные литералы отлично подходят для этого.

например, начать строку в javascript

let string = "<table><tr><th>header 1</th><th>header2></tr>";

, затем либо зациклить, либо для небольших таблиц просто вручную написать код и добавить в строку.

string = string.concat(`<tr><td>${array[i].object.value1}</td><td>${array[i].object.value2}</td></tr>`);

это будет простым решением вашей проблемы.

вам придется использовать append или innerHTML, чтобы поместить HTML-код на страницу с помощью JavaScript.

Веселись !!