Home / Questions / 563077
Accepted
nosoyGuti
Asked: 2022-10-20 04:11:36 +0800 CST 2022-10-20 04:11:36 +0800 CST

Print in html response ajax javascript

  • 772

I do the following ajax query:

$.ajax({
                    url: '',
                    type: 'GET',
                    data: '',
                    success: function(response){ 
                        if (response == 1){
                            nom= [];
                        }
                        else{
                            nom = JSON.parse(response)
                            // console.log('Esto es la respuesta :'+nom)
                            for (var p = 0; p<nom.length; p++){
                                // console.log(nom[p].nombre)
                                text = nom[p].nombre 
                                console.log(text)
                                $('#textoP').html(text)
                            }
                        } 
                    }    
                });

It returns me two names, which I want to insert into the temporary table as rows and display their data. So I want the table to generate as many rows as there are names in this case, it only generates the first name:

 fila2 += '<th id="textoP" style=" font-size: 0.9em;text-align: center;border: 1px solid #dddddd;"></th>'

javascript

1 Answers

  1. Best Answer

    Your problem is in this line: $('#textoP').html(text)of the code. When using html()you replace the content of the element each time, as the documentation says :

    When .html()is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

    When used .html()to set the content of an element, any content that was in that element is completely replaced by the new content. Also, jQuery removes other constructs, such as data and event handlers, from child elements before replacing those elements with the new content.

    Consider using append()which, as the documentation says :

    The .append()method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).

    The method .append()inserts the specified content as the last child of each element in the jQuery collection (to insert it as the first child, use .prepend()).

                            for (var p = 0; p<nom.length; p++){
                            // console.log(nom[p].nombre)
                            text = nom[p].nombre 
                            console.log(text)
                            $('#textoP').append(text)
                        }

    optimization

    When you are going to modify something in the DOM you must not forget that it is rendered every time you modify it , that is why it is never convenient to modify the DOM inside a loop. Build a chain and do appendonce, outside the loop :

                            var text;

                        for (var p = 0; p<nom.length; p++){
                            text += `${nom[p].nombre}<br />`; 
                        }
                        /*
                          El DOM se modificará una sola vez
                          No N veces, donde N puede ser
                          10 veces, 100 veces, 99999 veces
                        */
                        $('#textoP').append(text)

    In case you need to modify several parts of the DOM, you should use DocumentFragment.

    On the other hand, if you're trying to create a cell for each name, you should do appendin an element tr, not an element, thand surround each value inside the loop with th.

    Let's look at an example:

    var response = '[{"nombre":"PERIODO DE PRUEBA"},{"nombre":"PERIODO EXPERIMENTO"}]';

var nom = JSON.parse(response);

var text;

for (var p = 0; p < nom.length; p++) {
  text += `<th>${nom[p].nombre}</th>`;
}
/*
  El DOM se modificará una sola vez
  No N veces, donde N puede ser
  10 veces, 100 veces, 99999 veces
*/
$('#tableHeaders').append(text)
    table,
th,
td {
  padding: 10px;
  border: 1px solid black;
  border-collapse: collapse;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id="tableHeaders">
  </tr>
</table>

    • 0