grab Json object data and inject to html table by looping

Question

I have to grab "data" items and loop and inject to specific table like bellow. How is that possible from javascript/jquery? I have attached picture of my Json response of ajax call check to get idea about Json i need to be processed. Any question welcome. Thanks in advance....

Table:

<table>
       <tr>
          <th>Ebay Image</th>
          <th>Item Title</th>
       </tr>

       <tr need to loop this tr as per json objects>
          <td><img src="link defined from json value"></td>
          <td>title from json value</td>
       </tr>
</table>

Jquery Ajax call:

$.post("/CategoryResearch/Search", { OperationName: _operationname, calltype: _calltype, page: _page, keywords: _keywords, type: _type, location: _location })
                .done(function (data) {

                    if (data != null) {
                        $("#normalState").fadeOut();

                        //Loop and inject html table data to specific table 

                        console.log(data);

                    }


                });

Json Picture from console.log(data) -

Answer 1

Table: (dont forget to add tableId as id and remove de tr tag of sample data)

<table id="tableId">
   <tr>
      <th>Ebay Image</th>
      <th>Item Title</th>
   </tr>
</table>

Jquery Ajax call: (on edit i'm placing the entire loop directly in ajax call for simplify to you)

$.post("/CategoryResearch/Search", { OperationName: _operationname, calltype: _calltype, page: _page, keywords: _keywords, type: _type, location: _location }) .done(function (data) {

                if (data != null) {
                    $("#normalState").fadeOut();

                    //Loop and inject html table data to specific table 
                    if ($("#tableId tbody").length === 0) {
                    $("#tableId").append("<tbody></tbody>");
                        }

                        var jsonDataObject = JSON.parse(data);

                        $.each(jsonDataObject, function(i, item){
                        $("#tableId tbody").append(
                            "<tr>" +
                            "<td><img src=\"" + item.EbayImageUrl + "\"></td>"
                            "<td>" + item.EbayTitle + "</td>" +
                            "</tr>"
                            );
                        });
                    console.log(data);
                }
            });

Answer 2

You can loop through the array that you get as a response with a for ...

$.ajax({
    type: 'POST',
    url: '/CategoryResearch/Search',
    data: { OperationName: _operationname, calltype: _calltype, page: _page, keywords: _keywords, type: _type, location: _location },
    dataType: 'json',
    success: function(data) {

        if (data != null) {

            $("#normalState").fadeOut();

            var rows = [];
            for (var i=0, l=data.length; i<l; i++)
                rows.push('<tr><td>'+data[i].EbayImageUrl+'</td><td>'+data[i].EbayTitle+'</td></tr>');

            $('table tbody').html(rows.join(''));
        }
    }
});

Answer 3

have you tried using append?

<table id="appendedTable">
    <tr>
        <th>
            header 1
    </th>
    </tr>
</table>

<script>

    $(document).ready(function(){

    $('#appendedTable').append('<tr><td>concatenate here your json value</td></tr>');

    });

</script>

Answer 4

Parse the response

(I think I'm wrong about this part. I haven't used jQuery in years. I think it parses it for you, but, just in case...)

The response from the server is a string. Parse it with JSON.parse .

let myData = JSON.parse(data);

Based on the supplied screenshot, it looks like you get an array of objects.

Iterate the array

Loop over each element of the array with Array.forEach .

Add Rows to your table

Get a reference to your table with document.getElementsByTagName or document.getElementById , et al.

Add rows and cells with HTMLTableElement.insertRow() and HTMLTableRowElement.insertCell() .

Example

 const myData = [{ EbayImageUrl: 'http://via.placeholder.com/100x50/ff0000/ffffff', EbayTitle: 'example title' }, { EbayImageUrl: 'http://via.placeholder.com/100x50/00ff00/ffffff', EbayTitle: 'example title' }, { EbayImageUrl: 'http://via.placeholder.com/100x50/0000ff/ffffff', EbayTitle: 'example title' }]; const table = document.getElementsByTagName('table')[0]; myData.forEach(item => { let row = table.insertRow(); row.insertCell().innerHTML = `<img src="${item.EbayImageUrl}">`; row.insertCell().innerHTML = item.EbayTitle; }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> <table> <tr> <th>Ebay Image</th> <th>Item Title</th> </tr> </table>