Programmatically Append Some Td To Tr - Jquery Ajax Json

I've been looking for some way to append td to tr to table using jQuery without knowing anything about my json response, at this point in time I've reached this: function getClient

Solution 1:

Replace your code with this::

functiongetClientes(){
    $.ajax({
    url:URL_BASE+"Cliente",
    type:"GET",
    beforeSend: function (xhr) {
        xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola"));
    },
    success: function (data){
            $.each(data,function(index,value){
                $('tr').append(
                    $.each(value,function(value,celda)
                    {
                        $('td').text(celda);
                    })                      
            ).appendTo('#table');
            })
        }
    });     
}

I think it will work.

Solution 2:

I suppose you need to append your data like below first creating a table row and then appending to the last table row using selector $('tr:last')

var data = [["hello", "A"], ["hiii", "B"], ["hey", "C"]]


 $.each(data,function(index,value){
              $("#table").append('<tr></tr>') 
                     $.each(value,function(value,celda)
                    {
                       $('tr:last').append('<td>' + celda + '</td>');
                    })                   
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="table"class="table table-condensed"></table>

Solution 3:

See this Pen: http://codepen.io/rarmatei/pen/XpYWNL

I used the array "map" operator instead of jQuery's $.each.

In your function, when you do $('<td>').text(celda); inside each $.each() interation, the VM simply executes this instruction without storing/returning the result to be added to the final set of generated HTML elements.

So your function might look something like the below:

functiongetClientes() {
  $.ajax({
    url: URL_BASE + "Cliente",
    type: "GET",
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Authorization", "Basic " + btoa("hola" + ":" + "hola"));
    },
    success: function(data) {
      data.map(value => {
        var elements = value.map(subValue => {
          return $('<td>').text(subValue);
        });
        return $('<tr>').append(elements);
      }).appendTo('#table');
    }
  })
}

Solution 4:

finally I created a row and append it manually in each loop, not the best answer but it works for me, thank you for all answers :D

functiongetClientes(){
$.ajax({
url:URL_BASE+"Cliente",
type:"GET",
beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola"));
},
success: function (data){
        $.each(data,function(index,value){
        var row = $("<tr/>");                

                $.each(value,function(value,celda)
                {
                   row.append($('<td>').text(celda));
                });                      
        $('#table').append(row);
        })
    }
});     
}