How can I print the result of an ajax response in a table from javascript?

Navigation

#1 by (0 votes)

1

How can I print the result of an ajax response in a table from javascript?

Currently I print it with a label inside the table, ideally the rows will be formed and not just a column with all the results of the answer.

My js code:

  function mostrarContenidoJson(){
  var aNombre=[];
  var aCorreo=[];
   if(LaPeticion.readyState==4){ 
     if(LaPeticion.status==200){  
         var respuestaAjax=JSON.parse(LaPeticion.responseText); 
          for(var i=0; i<respuestaAjax.length; i++){
             aNombre.push(respuestaAjax[i].Nombre);
             aCorreo.push(respuestaAjax[i].Email);
             document.getElementById("Nombre").innerHTML = 
           aNombre.join(</br>");
            document.getElementById("Email").innerHTML = 
           aCorreo.join("/br>");
            }//Cierra for
          }else{
             alert("Error al leer la el material bibliografico");
        }
   }
}

javascript json typescript angular5

asked by r0b0f0sn0w 22.05.2018 в 20:00

source

1 answer

0

your code does not finish convincing me. Why do the array exist with Name and Mail? if you give an account in your for what you are doing is put a new element to each array (aName.push and aCorreo.push), then overwrite the content of the HTML elements with id "Name "e" Email "in each iteration, that is to say for each pair name, email that arrives from your AJAX query is deleting the content and rewriting.

This is the basic structure of a table:

 <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Source: link

As you can see, the rows of the table are like this:

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

This means that each row of your table must be inside a <tr> tag separating each field with a <td> tag in your example, each row has 2 fields, name and email.

Without seeing your HTML it becomes a bit complicated but I will give you a possible solution, this is your table:

 <table id="mytabla">
  <tr>
    <th>Nombre</th>
    <th>Correo Electronico</th>
  </tr>
 </table>

then in your JS code, in the for part:

let tabla = document.getElementById("mytabla");

for(var i=0; i<respuestaAjax.length; i++){
    let fila = "<tr><td>"+respuestaAjax[i].Nombre+"</td><td>"+respuestaAjax[i].Email+"</td></tr>
    tabla.innerHTML += fila;
}//Cierra for

What I do here is basically:

I keep a reference to mytabla in the variable "table"

For each element of "answerAjax" we create a row for the table (with the structure that I showed you previously)

We add this row to HTML, note that I do not use = I use += with what I'm adding the row to the end of the HTML content of the table, I'm not over writing anything.

Remember that we work as if the HTML were plain text so technically what we are doing is called "concatenation of chains "

answered by 22.05.2018 / 21:33

source

How to debug .xaml files? [closed] how can I compile all the jade files in a folder at the same time in windows?