Using jQuery to build table rows from AJAX response json

Question

Possible duplicate Nested elements  I m getting from server-side ajax response  Json  and I m trying to dynamically create table rows and append them to an existing table with id records table   I tried to implement the solution in possible duplicate but it failed   My response looks like that                  rank   9          content   Alon          UID   5                         rank   6           content   Tala           UID   6            the require result is something like that    lt tr gt      lt td gt 9 lt  td gt      lt td gt Alon lt  td gt      lt td gt 5 lt  td gt     lt  tr gt   lt tr gt      lt td gt 6 lt  td gt      lt td gt Tala lt  td gt      lt td gt 5 lt  td gt     lt  tr gt    I want to do something without parsing the Json so I tried to do the following  which of course was a disaster       function responseHandler response                   function                   each response  function i  item                        lt tr gt    html                         td   text item rank                          td   text item content                          td   text item UID                    appendTo   records table                                           From my solution I get only one row with the number 6 in all cells  What am I doing wrong

User · Answer

This is working sample that I copied from my project.

_x000D_

 function fetchAllReceipts(documentShareId) {_x000D_
_x000D_
        console.log('http call: ' + uri + "/" + documentShareId)_x000D_
        $.ajax({_x000D_
            url: uri + "/" + documentShareId,_x000D_
            type: "GET",_x000D_
            contentType: "application/json;",_x000D_
            cache: false,_x000D_
            success: function (receipts) {_x000D_
                //console.log(receipts);_x000D_
_x000D_
                $(receipts).each(function (index, item) {_x000D_
                    console.log(item);_x000D_
                    //console.log(receipts[index]);_x000D_
_x000D_
                    $('#receipts tbody').append(_x000D_
                        '<tr><td>' + item.Firstname + ' ' + item.Lastname +_x000D_
                        '</td><td>' + item.TransactionId +_x000D_
                        '</td><td>' + item.Amount +_x000D_
                        '</td><td>' + item.Status + _x000D_
                        '</td></tr>'_x000D_
                    )_x000D_
_x000D_
                });_x000D_
_x000D_
_x000D_
            },_x000D_
            error: function (XMLHttpRequest, textStatus, errorThrown) {_x000D_
                console.log(XMLHttpRequest);_x000D_
                console.log(textStatus);_x000D_
                console.log(errorThrown);_x000D_
_x000D_
            }_x000D_
_x000D_
        });_x000D_
    }_x000D_
    _x000D_
    _x000D_
    // Sample json data coming from server_x000D_
    _x000D_
    var data =     [_x000D_
    0: {Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test1", Lastname: "Test1", }_x000D_
    1: {Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test 2", Lastname: "Test2", }_x000D_
];

_x000D_

  <button type="button" class="btn btn-primary" onclick='fetchAllReceipts("@share.Id")'>_x000D_
                                        RECEIPTS_x000D_
                                    </button>_x000D_
 _x000D_
 <div id="receipts" style="display:contents">_x000D_
                <table class="table table-hover">_x000D_
                    <thead>_x000D_
                        <tr>_x000D_
                            <th>Name</th>_x000D_
                            <th>Transaction</th>_x000D_
                            <th>Amount</th>_x000D_
                            <th>Status</th>_x000D_
                        </tr>_x000D_
                    </thead>_x000D_
                    <tbody>_x000D_
_x000D_
                    </tbody>_x000D_
                </table>_x000D_
         </div>_x000D_
         _x000D_
 _x000D_
    _x000D_
    _x000D_

_x000D_

User · Answer

I do following to get JSON response from Ajax and parse without using parseJson     ajax     dataType   json    lt ----   type   GET     url   get allworldbankaccounts json     data     body form first   serialize      If you are using dataType as Text then you need   parseJSON response

User · Answer

Try this  DEMO link updated    success  function  response            var trHTML                 each response  function  i  item                trHTML      lt tr gt  lt td gt     item rank     lt  td gt  lt td gt     item content     lt  td gt  lt td gt     item UID     lt  td gt  lt  tr gt                            records table   append trHTML           Fiddle DEMO WITH AJAX

User · Answer

Here is a complete answer from hmkcode com  If we have such JSON data     JSON Data var articles                     title   Title 1            url   URL 1            categories    jQuery             tags    jquery   json     each                         title   Title 2            url   URL 2            categories    Java             tags    java   json   jquery              And we want to view in this Table structure   lt table id  added-articles  class  table  gt               lt tr gt                   lt th gt Title lt  th gt                   lt th gt Categories lt  th gt                   lt th gt Tags lt  th gt               lt  tr gt           lt  table gt    The following JS code will fill create a row for each JSON element     1  remove all existing rows    tr has td    remove        2  get each article   each articles  function  index  article            2 2 Create table column for categories     var td categories       lt td  gt             2 3 get each category of this article       each article categories  function  i  category            var span       lt span  gt             span text category           td categories append span                   2 4 Create table column for tags    var td tags       lt td  gt             2 5 get each tag of this article           each article tags  function  i  tag            var span       lt span  gt             span text tag           td tags append span                   2 6 Create a new row and append 3 columns  title url  categories  tags          added-articles   append     lt tr  gt                 append     lt td  gt    html   lt a href    article url    gt   article title   lt  a gt                  append td categories               append td tags

User · Answer

Use  append instead of  html  var response              rank   9          content   Alon          UID   5                         rank   6           content   Tala           UID   6               convert string to JSON response     parseJSON response      function           each response  function i  item            var  tr       lt tr gt    append                  lt td gt    text item rank                   lt td gt    text item content                   lt td gt    text item UID                appendTo   records table            console log  tr wrap   lt p gt    html

User · Answer

ajax     type   GET     url  urlString     dataType   json     success  function  response        var trHTML           for var f 0 f lt response length f            trHTML      lt tr gt  lt td gt  lt strong gt     response f   app action name     lt  strong gt  lt  td gt  lt td gt  lt span class  label label-success  gt   response f   action type      lt  span gt  lt  td gt  lt td gt   response f   points     lt  td gt  lt  tr gt                   result   html trHTML             spin-grid    removeClass   fa-spin

User · Answer

Data as JSON  data                      quot rank quot   quot 9 quot           quot content quot   quot Alon quot           quot UID quot   quot 5 quot                             quot rank quot   quot 6 quot           quot content quot   quot Tala quot           quot UID quot   quot 6 quot                     You can use jQuery to iterate over JSON and create tables dynamically  num rows   data length  num cols   size of array data 0     table id    my table   table      quot  lt table id  quot    table id    quot  gt  lt  table gt  quot     header      quot  lt tr class  table header  gt  lt  tr gt  quot      each Object keys data 0    function ind header  val header    col      quot  lt td gt  quot    val header    quot  lt  td gt  quot    header append col      table append header      each data  function ind row  val    row      quot  lt tr gt  lt  tr gt  quot      each val  function ind cell  val cell    col      quot  lt td gt  quot    val cell    quot  lt  td gt  quot    row append col      table append row       Here is the size of array function  function size of array obj        size   Object keys obj  length      return size          You can also add styling if needed          content  this class    children  canvas   remove            content  this class    append table           table id  css  width    100    css  border    1px solid black   css  text-align    center   css  border-collapse    collapse            table id     td   css  border    1px solid black     Result

User · Answer

Try it like this     each response  function i  item            lt tr gt    html   lt td gt     response i  rank     lt  td gt  lt td gt     response i  content     lt  td gt  lt td gt     response i  UID     lt  td gt    appendTo   records table          Demo  http   jsfiddle net R5bQG

User · Answer

You shouldn t create jquery objects for each cell and row  Try this   function responseHandler response         var c              each response  function i  item                          c push   lt tr gt  lt td gt     item rank     lt  td gt              c push   lt td gt     item content     lt  td gt              c push   lt td gt     item UID     lt  td gt  lt  tr gt                                       records table   html c join

User · Answer

I have created this JQuery function         Draw a table from json array     param  array  json data array Data array as JSON multi dimension array     param  array  head array Table Headings as an array  Array items must me correspond to JSON array      param  array  item array JSON array s sub element list as an array     param  string  destinaion element   id  or   class   html output will be rendered to this element     returns  string  HTML output will be rendered to  destinaion element       function draw a table from json json data array  head array  item array  destinaion element        var table     lt table gt          TH Loop     table      lt tr gt          each head array  function  head array key  head array value            table      lt th gt     head array value     lt  th gt                table      lt  tr gt          TR loop       each json data array  function  key  value             table      lt tr gt              TD loop           each item array  function  item key  item value                table      lt td gt     value item value      lt  td gt                        table      lt  tr gt                table      lt  table gt           destinaion element  append table

User · Answer

You could do it something like this    lt  -- Latest compiled and minified CSS -- gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt    lt  -- jQuery library -- gt   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt    lt  -- Latest compiled JavaScript -- gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt         lt script gt        function           ajax       url    lt Insert your REST API which you want GET POST PUT DELETE gt        data    lt any parameters you want to send as the Request body or query string gt        dataType  json      async  true      method   GET      success  function data          If the REST API returned a successful response it ll be stored in data         just parse that field using jQuery and you re all set      var tblSomething     lt thead gt   lt tr gt   lt td gt  Heading Col 1  lt  td gt   lt td gt  Heading Col 2  lt  td gt   lt td gt  Col 3  lt  td gt   lt  tr gt   lt  thead gt   lt tbody gt           each data  function idx  obj          Outer  each loop is for traversing the JSON rows     tblSomething      lt tr gt           Inner  each loop is for traversing JSON columns       each obj  function key  value       tblSomething      lt td gt     value     lt  td gt                tblSomething      lt  tr gt                 tblSomething      lt  tbody gt             tblSomething   html tblSomething              error  function jqXHR  textStatus  errorThrown       alert  Hey  something went wrong because      errorThrown                                lt  script gt         lt table id    tblSomething  class    table table-hover  gt  lt  table gt

User · Answer

jQuery html takes string or callback as input  not sure how your example is working    Try something like     lt tr gt    append     lt td gt     item rank     lt  td gt    append     And you have some definite problems with tags fromation  It should be     lt tr  gt    and     lt td  gt

[jquery] Using jQuery to build table rows from AJAX response(json)

Examples related to jquery

Examples related to json

Examples related to html-table