JSON Data from Ajax Call

Question

I have JSOn data coming from my Function, i do not need all the data and had to create some data too based upon the data i am getting, There are many code outlying which specify how can i loop over json data and display it

$.ajax({url: 'page.php',
        data: {id: 1},
        dataType: 'json',
        type:'POST',
        success: function (json) {
            div.html('<table align="left" width="70%" class="table table-striped borderless p-l-xl">'+
                    '<tr>'+
                        '<td>d1</td><td>d2</td><td>Action</td></tr>'+
                        '<tr><td>'+json.d1+'</td><td>'+json.d2+'</td>'+
                        '<td><a href="javascript:;" class="t" data-id="'+ json.id +'" data-sid="'+json.sid+'">Delete</a></td>'+
                    '</tr>'+
                '</table>').removeClass('loading');
            } 
    });

Tried using this code

How to iterate JSON object with jQuery

but i am confused how i feed my own href with custom data and separate headers

Did a Small Update

$.each(json,function(index,item){
                $('<table><tr>').append(
                    $("<td>").text(item.d1),
                    $("<td>").text(item.d2),
                    $("<td>").html('<a href="javascript:;" class="d" data-sid="'+ json.id+'" data-id="'+json.id+'">Delete</a></td>')
                ).appendTo(div);
        });

now it works and create a seperate for each record, amd missing headers

while i want that all the rows should be under one TABLE Tag and have headers

Answer 1

Following your update, it's a little clearer.

You say

"while i want that all the rows should be under one TABLE Tag and have headers"

...so the simple solution to that is to create the table first before you start the loop, and add the headers at that time as well. Then each time in the loop, just append a new row to the existing table, instead of creating a whole new table.

This logic isn't too complicated once you think about it like that

Here is a demo which illustrates what I mean, using some dummy data instead of the response from the AJAX.

 //dummy test data var json = [{ "id": 1, "d1": "Text 1", "d2": "Text 2" }, { "id": 2, "d1": "Text A", "d2": "Text B" }, { "id": 3, "d1": "Text X", "d2": "Text Y" }, ]; var div = $("#div1"); var table = $('<table id="table1"><tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>'); $.each(json, function(index, item) { var row = $("<tr>"); row.append( $("<td>").text(item.d1), $("<td>").text(item.d2), $("<td>").html('<a href="javascript:;" class="d" data-sid="' + json.id + '" data-id="' + json.id + '">Delete</a></td>') ); row.appendTo(table); }); table.appendTo(div); 

 table { border-collapse: collapse; } th, td { border: 1px solid #cccccc; padding: 5px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div1"></div> 

Answer 2

I believe this is what you are trying to achieve. (without jQuery other than the $.get()).

1. Given some data (here are fake blog posts)
2. Modify the data is some way
3. Place the modified data into a table
4. Provide an "Action" column with a link to delete the row

 $.get('https://jsonplaceholder.typicode.com/posts', transformData); function transformData(posts) { let tableData = posts.map(post => { return { id: post.id, title: post.title, added: 'added' } }); makeTable(tableData); } function deleterow(el) { alert('Deleting row with id: ' + el.dataset.id); } function makeTable(data) { var table = document.createElement("table"); table.style.border = "1px"; var headerRow = document.createElement("thead"); headerRow.style.backgroundColor = "#ccc"; Object.keys(data[0]).forEach(key => { let headerCol = document.createElement("td"); headerCol.textContent = key; headerRow.appendChild(headerCol); }); let actionCol = document.createElement('td'); actionCol.textContent = 'Action'; headerRow.appendChild(actionCol); table.appendChild(headerRow); data.forEach(item => { let row = document.createElement("tr"); Object.keys(item).forEach(key => { let col = document.createElement("td"); col.textContent = item[key]; row.appendChild(col); }); let action = document.createElement("a"); action.href = 'javascript:void(0);'; action.textContent = 'Delete'; action.setAttribute("onclick", 'deleterow(this)'); action.dataset.id = item.id; action.dataset.title = item.title; action.dataset.added = item.added; row.appendChild(action); table.appendChild(row); }); document.body.appendChild(table); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>