how do I generate a table from json with nested .each functions?

Question

I am having trouble generating an HTML table from a json file using jQuery. The table has columns for Surgery_Date, Name, Insurance, Total, and CPT Payments. I want the last column to list the CPT codes and Payment in one cell with the intention to later make it a collapsable div or something once I get the basics working. My code generates the table ok except for the "Codes" cell fills with

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

I know I am fundamentally misunderstanding how the jQuery .each function returns values. I can run console.log(cptpmt) and see that it is iterating over the values correctly, I just cannot figure out how to get them into the html.

JSON example:

"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)

Saddan de lo Santos · Accepted Answer · 2018-06-25 04:14:50Z

2

You have some errors in your javascript code, for example, you can not return data from $ .each, you also created a variable "cptpmt" inside another $ .each where you save the data of "Payment_by_CPT" like this inside $ .each, this Variable is deleted for each loop, so it will only have the value of the last record in the array. but you can try this:

 $("#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)
    });

answered Jun 25, 2018 at 4:14

Saddan de lo Santos

423 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

minam.cho Over a year ago

This is good answer. and if needs a performance , use append function after made html_str. like this > let html_str = 'blabla', data.forEach(...) { html_str += 'blabla' } .append(html_str)

Fraxr Over a year ago

Thanks Saddan, that totally worked. The example code I posted was probably my 20th attempt at fixing it, I suppose I confused myself along the way. I'm still learning javascript coming from a limited python background. I tweaked the code slightly and it works like a champ!

Saddan de lo Santos Over a year ago

I’m glad help you. If you have another problem do not hesitate to ask.

Collectives™ on Stack Overflow

how do I generate a table from json with nested .each functions?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related