时间戳

首页 > 解决方案 > 如何使用嵌套的 .each 函数从 json 生成表？

javascript - 如何使用嵌套的 .each 函数从 json 生成表？

问题描述

我无法使用 jQuery 从 json 文件生成 HTML 表。该表包含 Surgery_Date、Name、Insurance、Total 和 CPT Payments 列。我希望最后一列在一个单元格中列出 CPT 代码和付款，以便以后在基本工作正常后使其成为可折叠的 div 或其他东西。我的代码生成表格正常，除了“代码”单元格填充

[object Object],[object Object],[object Object],[object Object],[object Object]

我知道我从根本上误解了 jQuery .each 函数如何返回值。我可以运行 console.log(cptpmt) 并看到它正确地迭代了这些值，我只是不知道如何将它们放入 html 中。

JSON 示例：

"326177": {
        "Insurance": "Work comp",
        "Name": "Doe, John",
        "Payment_by_CPT": [
            {
                "CPT": "29823",
                "Payment": "$170.38"
            },
            {
                "CPT": "29824",
                "Payment": "$183.56"
            },
            {
                "CPT": "29826",
                "Payment": "$200.18"
            },
            {
                "CPT": "29827",
                "Payment": "$1,167.98"
            },
            {
                "CPT": "29828",
                "Payment": "$504.47"
            }
        ],
        "Surgery_Date": "2017-06-29",
        "Total": "$2,550.76"
    },

HTML：

<table class="table table-bordered table-dark table-striped table-hover">
                <thead class="thead-dark">
                    <tr>

                        <th scope="col">Surgery Date</th>
                        <th scope="col">Name</th>
                        <th scope="col">Insurance</th>
                        <th scope="col">Total</th>
                        <th scope="col">Codes</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                </tbody>
            </table>

javascript:

$(function () {
    $.each(data, function (index) {
        let surg_date = data[index]['Surgery_Date']
        let name = data[index]['Name']
        let insurance = data[index]['Insurance']
        let total = data[index]['Total']

        let x = $.each(data[index]['Payment_by_CPT'], function (i) {
            let cpt = data[index]['Payment_by_CPT'][i]['CPT']
            let pmt = data[index]['Payment_by_CPT'][i]['Payment']
            let cptpmt = cpt + ":  " + pmt + "<br>"
            return cptpmt
        })

        let html_str = "<tr>" +
            "<td>" + surg_date + "</td>" +
            "<td>" + name + "</td>" +
            "<td>" + insurance + "</td>" +
            "<td>" + total + "</td>" +
            "<td>" + x + "</td>"
        "</tr>"

        $('#tableBody').append(html_str)

标签： javascriptjquery

解决方案

您的 javascript 代码中存在一些错误，例如，您无法从$ .each返回数据，您还在另一个$ .each中创建了一个变量“ cptpmt”，您将像这样在$ .each中保存“Payment_by_CPT”的数据，每次循环都会删除这个变量，所以它只会有数组中最后一条记录的值。但你可以试试这个：

 $("#tableBody").empty();
    //get the items in array data (you can use $.each, it does not matter)
    data.forEach((items)=>{
        let surg_date = items.Surgery_Date;
        let name = items.Name;
        let insurance = items.Insurance;
        let total = items.Total;
        let cptpmt = '';
        // create 'cptpmt'
        for(let i=0;i < item.Payment_by_CPT;i++){
            let pCPT = item.Payment_by_CPT[i];
            cptpmt+= ""+pCPT.CPT + ":"+pCPT.Payment+"<br/>";
        }
        let html_str = "<tr>" +
                            "<td>" + surg_date + "</td>" +
                            "<td>" + name + "</td>" +
                            "<td>" + insurance + "</td>" +
                            "<td>" + total + "</td>" +
                            "<td>" + cptpmt + "</td>"
                        "</tr>"

        $('#tableBody').append(html_str)
    });

推荐阅读