Как создать и заполнить несколько таблиц из многомерного массива с помощью JavaScript

Question

Я пытаюсь создать и заполнить несколько таблиц из многомерного массива. Мой массив - это многомерный массив, который выглядит следующим образом:

{
    "John Snow": [
        {
            "user_id": "4",
            "id": "28",
            "clock_in": "2019-06-03 14:32:14",
            "clock_out": "2019-06-04 14:32:14",
            "time": "24.00",
            "first_name": "John",
            "last_name": "Snow"
        },
        {
            "user_id": "4",
            "id": "29",
            "clock_in": "2019-06-04 20:47:18",
            "clock_out": "2019-06-05 18:47:18",
            "time": "22.00",
            "first_name": "John",
            "last_name": "Snow"
        }
    ],
    "Frank Thomas": [
        {
            "user_id": "6",
            "id": "30",
            "clock_in": "2019-06-03 06:32:04",
            "clock_out": "2019-06-05 14:05:04",
            "time": "55.55",
            "first_name": "Frank",
            "last_name": "Thomas"
        }
    ]
}

Я не уверен, как пройти через это с помощью javascript, я предполагаю, что мне нужно будет вложить цикл for, но не уверен, как его структурировать.

Я смог выполнить цикл и заполнить одну таблицу, когда моя структура массива представляла собой один массив без ключей, используя приведенный ниже код:

<div id="tables"></div>

<script type="text/javascript">


function search_data(){
            var fromDate = $('#from_date').val();
            var toDate = $('#to_date').val();
            var userId = $('#employee_option').val();


            $.ajax({

                url:"<?php echo base_url(); ?>clock/search_data",
                method:"post",
                dataType:"JSON",
                data:{fromDate:fromDate, toDate:toDate, userId:userId},
                success:function(data){
                    console.log(data)

                    var html = '<table class="table table-striped table-condensed table-responsive" id="myTable"><thead><tr><th>Employee</th><th>Time In</th><th>Time Out</th><th>Total Time</th><th>Action</th></tr></thead><tbody>';

                     for(var count = 0; count < data.length; count++){
                        html += '<tr>';
                        html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="id" >'+data[count].first_name+" "+data[count].last_name+'</td>';
                        html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_in" value="'+data[count].clock_in+'"></td>';
                        html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_out" value="'+data[count].clock_out+'"></td>';
                        html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="time">'+data[count].time+'</td>';
                        html += '<td><button type="button" name="delete_btn" id="'+data[count].id+'" class="btn btn-xs btn-danger btn_delete"><span class="glyphicon glyphicon-trash"></span></button></td></tr>';

                     }   

                     $('#tables').html(html);
                     $('.dateedit').each(function(){ 
                        $(this).datetimepicker({
                            format: "YYYY-MM-DD H:mm:ss",
                            sideBySide: true

                        });

                     });


                 }
                });

        }
        </script>

Буду признателен за любую помощь, надеюсь, это имеет смысл. Вот картина того, что у меня есть с базовым массивом:

Вот что я пытаюсь сделать:

Answer 1

Я бы перебирал сотрудников и передавал их другой функции для распечатки каждого сотрудника ... потому что мне трудно понять вложенные циклы.легче поддерживать и изменять отдельные функции, IMO.

Примечание. Я - разработчик PHP, использующий минимальный javascript, поэтому не ожидайте, что мой код будет исправлен.Я думаю, что это делает то, что вы хотите.

let employees = {
    "John Snow": [
        {
            "user_id": "4",
            "id": "28",
            "clock_in": "2019-06-03 14:32:14",
            "clock_out": "2019-06-04 14:32:14",
            "time": "24.00",
            "first_name": "John",
            "last_name": "Snow"
        },
        {
            "user_id": "4",
            "id": "29",
            "clock_in": "2019-06-04 20:47:18",
            "clock_out": "2019-06-05 18:47:18",
            "time": "22.00",
            "first_name": "John",
            "last_name": "Snow"
        }
    ],
    "Frank Thomas": [
        {
            "user_id": "6",
            "id": "30",
            "clock_in": "2019-06-03 06:32:04",
            "clock_out": "2019-06-05 14:05:04",
            "time": "55.55",
            "first_name": "Frank",
            "last_name": "Thomas"
        }
    ]
};

function get_employee_table(employeeName, employees){
	let str = "<table><tr><td>Employee Name</td><td>Clock In</td><td>Clock Out</td></tr>";
    for (let index in employees[employeeName]){
        let clock = employees[employeeName][index];
        str +="<tr><td>"+(clock['first_name']+" "+clock['last_name'])+"</td>"
            + "<td>"+clock['clock_in']+"</td>"
            + "<td>"+clock['clock_out']+"</td>"
            + "</tr>";
    }
    str +="</table>";
    return str;
}

for (let employee in employees){

    document.getElementById("employee_table_demo").innerHTML = document.getElementById("employee_table_demo").innerHTML + 
get_employee_table(employee,employees);
}

<div id="employee_table_demo"></div>

Теперь ... вот где я делюсь своим мнением.Я думаю, что вы, вероятно, могли бы сделать это самостоятельно.Мне было трудно понять, как правильно зациклить объекты, поскольку forin дал мне ключ, а не значение.Но фактическая операция не была очень сложной.Я понимаю, что мы все находимся на разных этапах в нашем наборе навыков, и если вы новичок, это могло бы показаться очень сложным.Это похоже на проблему, которая требует большего количества смазки для локтя и, возможно, проталкивает некоторое разочарование.Это был хороший опыт для меня.И хороший способ избежать работы над моими собственными проектами. Lol.

Answer 2

Используйте цикл for..in для обхода объекта и forEach через массив.

for(let row in data) {
  data[row].forEach(cell => {

  ...

  }
}