print array json in dinamic table <html>

serenimus

Hi greeting to the comunity!! I´m trying to display the info from a array json dinamically into an html table, but I'm dont really undertand what I`m doing wrong so, I`m taking three columns from my MySql Table (Name,city and Provinz),so I need a row for each row of my sql table, if a obtain three rows , that is in total 9 cells,ordered in three rows, 3 each.. onload() on body calls the function

function verDetalleNegocio(){

			var localidad=getLocalidad();
			var negocio=getNegocio();
			var datos={'loc':localidad,'neg':negocio};
			var datosS=JSON.stringify(datos);
			
			if(localidad!=="" && negocio!==""){
				
				$.ajax({
				type:"POST",
				data:"datos="+datosS,
				dataType:'json',
				cache:false,
				url:"basePath("web/negocios/detallenegocioajax")?>",
				success:function(datos){						
					
					var celdas=datos.length;
					var filas=celdas/3;
				
					for(i=0;i");
						$("#tabdat").append(""+datos\[i\]+"");
						$("#tabdat").append("");						
					}
			
				}
				 
			});
				
			}else{
				return null;
			}				
		}

here, I habe my html table:

Nombre

Localidad

Provincia

and finally, thatt the way the results are display, I would like to show the rows, one on top of the other, and not one next to the other, hoy could say in the iteration, every three, a new row!!! Thanks!!! :)

Nombre Localidad Provincia
Naviera Riazor La Coruña La Coruña Barcos Texeiro La Coruña La Coruña Barcos de Vela Riazor La Coruña La Coruña

Lost User

It looks like you are creating a new row for each item in the code:

for(i=0;i");
$("#tabdat").append(""+datos[i]+"");
$("#tabdat").append("");
}

You should move the <tr> tags outside the loop thus:

$("#tabdat").append("");
for(i=0;i"+datos[i]+"");
}
$("#tabdat").append("");

serenimus

Hi!! thanks a lot for your reply!! unfortunatelly, after the changes you proposed me, I get the same result :(( I`ll keep trying!! :)

Lost User

It would help us if you showed the actual code you use, and the HTML that is produced when you run it. You can edit your question and add the update information.

serenimus

Hi again!! thanks for your reply, so I put it down the proposal of a colleage from stackoverflow...there I posted the same question.. so the json array comes from the controller, filtered with json_encode();, this is the copy paste from the Chome debugger..so as you can see, I want to display the array of 9 positions in three rows one under other, and each with three cells..

0: "Naviera Riazor"
1: "La Coruña"
2: "La Coruña"
3: "Barcos Texeiro"
4: "La Coruña"
5: "La Coruña"
6: "Barcos de Vela Riazor"
7: "La Coruña"
8: "La Coruña"
length: 9

this is the table, with a script, that I dont know if is "key" so that everything goes good.. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tabdat" border=1 style="margin-top: 300px;"> <thead> <tr> <th>Nombre</th> <th>Localidad</th> <th>Provincia</th> </tr> </thead> <tbody></tbody> </table> </body> and here is the function verDetalleNegocio(), that I invoke on the body with the onload method, inside I do the loop, and try to display on the #tabdat, under...

function verDetalleNegocio(){

			var localidad=getLocalidad();
			var negocio=getNegocio();
			var datos={'loc':localidad,'neg':negocio};
			var datosS=JSON.stringify(datos);
			
			if(localidad!=="" && negocio!==""){
				
									
				$.ajax({
				type:"POST",
				data:"datos="+datosS,
				dataType:'json',
				cache:false,
				url:"basePath("web/negocios/detallenegocioajax")?>",
				success:function(datos){
				
				
				
				html = "";
				for(i=0; i";
				 html += ""+datos\[i\]+"";
				 html += ""+datos\[i\]+"";
				 html += "";
				}
				$("#tabdat tbody").append(html);
			   
			   
			  
				
				}
				 
			});
				
			}else{
				return null;
			}				
		}

and finally the result that I obtain on the screen..as you can see, the information is displayed twice...please, tell me If i can put more infomation...thanks:thumbsup: Nombre Localidad Provincia Naviera Riazor Naviera Riazor Naviera Riazor La Coruña La Coruña La Coruña La Coruña La Coruña La Coruña Barcos Texeiro Barcos Texeiro Barcos Texeiro La Coruña La Coruña La Coruña La Coruña La Coruña

Lost User

Look at your code, in the loop you are printing the same item html += ""+datos[i]+""; three times. I showed you what the code should be in my original response.

serenimus

Hi!! thanks for your reply..you`re right... now I changed the format of the array, and now its like this:

0: ["Naviera Riazor"]
1: {1: "La Coruña"}
2: {2: "La Coruña"}
3: ["Barcos Texeiro"]
4: {1: "La Coruña"}
5: {2: "La Coruña"}
6: ["Barcos de Vela Riazor"]
7: {1: "La Coruña"}
8: {2: "La Coruña"}
length: 9

The problem is, that I dont find the way to display properly the info in the html, table,I tryed with a double loop, first for, and secon inner do...while, and two for consecutives, thats mean one inside the other..but It doesn`t work...to ne honest, sometimes I think I'm doing it very complicated, maybe there is another way to do it more simple..

var html="";
				var celdas=datos.length;
				var filas=celdas/3;
				var cont=0;
				
				
				for(f=0;f";
						html+="";
						
						cont++;
						
					}while(cont<=2);
					
					
				}
				$("#tabdat tbody").append(html);

Thanks!!

Lost User

Loo,k at the data and decide how many items you want in each row. You then can set the values for your loop. For each iteration of the loop: 1. Emit a <tr> element. 2. Emit a <td> followed by the first data item, followed by </td> 3. Repeat number 2 for each remaining data item. 4. Emit a </tr> item for the end of the row.