我不知道如何解决这个问题（php、javascript、mysql）

Question

I have 3 spaces in a web page and through javascript I have to show the result of a query in each of them, the problem is that each result appears only in the last table and the other 2 remain empty.

This is a php page's response when an action is performed:

{"result":"1","testresult:{"nome":"Marco,Matteo,Mattia","cognome":"Rossi,Leone,Piero","tipo":"3,14,44"}}

Then through javascript I would like to assign these values to 3 empty spaces, like thi example:

|----------1----------|  |----------1----------|  |----------1----------|
| name:   Marco       |  | name:   Matteo      |  | name:   Mattia      |
| cognome:   rossi    |  | cognome:   Leone    |  | cognome:   Piero    |
| tipo: 3             |  | tipo: 14            |  | tipo: 44            |
|-----------------------------------------------------------------------|

but the result is this:

|----------1----------|  |----------1----------|  |----------1-------------------------|
| name:   undefined   |  | name:   undefined   |  | name:   Marco, Matteo, Mattia      |
| cognome:   undefined|  | cognome:   undefined|  | cognome:   Rossi, Leone, Piero     |
| tipo: undefined     |  | tipo: undefined     |  | tipo: 3, 14, 44                    |
|--------------------------------------------------------------------------------------|

here I leave you all my work. PHP

$stmtcarte = $connection->prepare("SELECT GROUP_CONCAT(concat.nome) as nome, GROUP_CONCAT(concat.cognome) as cognome, GROUP_CONCAT(concat.tipo) as tipo FROM (SELECT nome, cognome, tipo FROM test WHERE categoria=? ORDER BY RAND() LIMIT 3 ) concat");

$categoria="test";
$stmtcarte->bind_param("s",$categoria);
$stmtcarte->execute();
$risultatocarte = $stmtcarte->get_result();
$numero_giocatori = $risultatocarte->num_rows;
$result=array("risultato"=>"1", "testresult"=>"");
while($rispostacarte=$risultatocarte->fetch_assoc()){
$result['risultato']="1";
$result['testresult']=$rispostacarte;

echo json_encode($result);

}
$stmtcarte->close();

JAVASCRIPT

    $(document).on("click",".test-btn", function(){
    data = {'id':$(this).data('id')}
    $.post("op2.php", data, function(response){
    var Ogg = $.parseJSON(response);
        
        switch(Ogg.risultato){
            case "1":
                //
                //
                //
            $.each(Ogg,function(i,data){
                        
                   
            if(data.tipo == "0"){
                              //
            }else{
                              //
            }

            setTimeout(function () {
            $(".Response").append("<div class='card-cont'><div id='cobr' class='pcdisplay center-block'> <div class='top-overlay'></div><div style='color:;' class='pcdisplay-nome'>"+ data.nome +"</div><div style='color:;' class='pcdisplay-cognome'>"+ data.cognome +"</div><div style='color:;' class='pcdisplay-tipo'>"+data.tipo+"</div><div class='pcdisplay-chem-style-name'></div></div></div><span style='display:block; text-align: center; color: #FFFF66; font-weight: bold;'>" + data.tipo + "</span></div>").hide().fadeIn(100);
                       
            }, i*900);
            });
            break;
            case "2":
                alert("//");
            break;
            case "3":
                alert("//");
            break;
            case "4":
                alert("//");
            break;
        }

    });            
    
});

I hope someone can help me. thank you all.

Answer 1

//sample data response when ajax return 
const data = {"nome":"Marco,Matteo,Mattia","cognome":"Rossi,Leone,Piero","tipo":"3,14,44"};

//convert string into array list   
var nome = data.nome.split(',');    
var cognome = data.cognome.split(',');    
var tipo = data.tipo.split(',');

//array length 
let nLen = nome.length;
//for loop for print array list 
let text = "<ul>";
for (let i = 0; i < nLen; i++) {
  text += "<li>" + nome[i] +" - " + cognome[i] +" - "+ tipo[i] +"</li>";
}
text += "</ul>";
// append this with html 
console.log(text);