JSON 对象的数据表不可用

Question

我正在使用 DataTables 1.13.5 和 Laravel 10.0。我创建了一个包含 ID、品牌、名字等列的表。

我的 MySQL 表中还有另一列

all

，其类型为 JSON。有像

zip

这样的记录及其值。我已经解析了记录。

我的输出：最初一条记录和悬停显示

all

列。

表格详情

Field                 | Type                | Null | Key | Default | Extra          |
+---------------------+---------------------+------+-----+---------+----------------+
| id                  | bigint(20) unsigned | NO   | PRI | NULL    | auto_increment |
| brand               | varchar(255)        | NO   |     | NULL    |                |
| first_name          | varchar(255)        | NO   |     | NULL   |                |
| all                 | json                | YES  |     | NULL    |                |
| created_at          | timestamp           | YES  |     | NULL    |                |

表值

|  1 | Test  | test       | [{"zip": "xyz", "phone": "123"}]    | 2023-07-20 10:05:58 |
|  2 | Test  | test        | [{"zip": "abc", "phone": "456"}]       | 2023-07-20 10:09:10 |

脚本

<script>
                var columnDefs = [

                {
                    title: "ID",
                    targets: 0,
                    render: function (data) {
                        return (data['id']);
                    }
                },
                {
                    title: "Brand",
                    targets: 1,
                    render: function (data) {     
                        return (data['brand']);
                    }
                },
                {
                    title: "Form",
                    targets: 2,
                    render: function (data) {
                        return (data['form_name'];);
                    }
                },
                {
                    title: "First Name",
                    targets: 3,
                    render: function (data) {
                        return (data['first_name']);
                    }
                },
                {
                    title: "All",
                    targets: 4,
                    className: 'all',
                    render: function (data) {
                        var details = JSON.parse(data['data']);
                        var result = "";
                        $.each(details, function (index, value) {
                            $.each(value, function (v, k) {
                                let underscore = v.replace('_', ' ');
                                underscore = underscore.toLowerCase().replace(/\b[a-z]/g, function (letter) {
                                    return letter.toUpperCase();
                                });
                                result = result + underscore + ": " + k + '<br>';
                            });
                        });
                        return result;
                    }
                {
                    title: "Created",
                    targets: 5,
                    render: function (data) {
                        return (data['created_at']);
                    }
                },
</script>

谢谢您的提前！