Recover JSON data via AJAX and PHP

Question

Gentlemen, I’m setting up a system where he will consult an API and show the results within Divs. But I’m stopping this result, only by the console.log I’m not able to play inside the Divs. Follow the JSON return image:

I am trying to consume JSON as follows:

var url = 'https://allsportsapi.com/api/football/?met=H2H&APIkey=aafcadc8cb3f9937e6fb2576051b56ac980b9c342e99813b47ade59da2140522&firstTeamId=2616&secondTeamId=2617';
$.getJSON({
    type: "GET", 
    url: url,
    timeout: 3000,
    datatype: 'JSON',
    contentType: "application/json; charset=utf-8",
    cache: false,
    beforeSend: function() {
        $("h2").html("Carregando..."); //Carregando
    },
    error: function() {
        $("h2").html("O servidor não conseguiu processar o pedido");
    },
    success: function(retorno) {
            // Interpretando retorno JSON...
            console.log(retorno);
            var clientes = retorno;
            // Listando cada cliente encontrado na lista...
            $.each(clientes,function(i, cliente){
                var item = "<p>"+cliente.event_home_team+"</p><p>"+cliente.event_away_team+"</p>";
                $("#retorno").append(item);
            });
                //Limpar Status de Carregando 
                $("h2").html("Carregado"); 
    } 
});  

To fit in Layout: (but I need to correct the return of JSON, picking up the results I organize the Divs)

Thank you very much in advance!

Answer 1

The first code problem I believe was in Success function, failed to convert from string to json:

success: function (retorno){
  cliente = JSON.parse(retorno);
}

Answer 2

[RESOLVED]

After several hours trying to understand where I was going wrong, I was able to solve it and stayed as follows:

$.getJSON("https://allsportsapi.com/api/football/?met=H2H&APIkey=aafcadc8cb3f9937e6fb2576051b56ac980b9c342e99813b47ade59da2140522&firstTeamId=2616&secondTeamId=2617", function(data){
$.each(data, function (key, item) {
    $.each(item.H2H, function(key, value){

        away_team = value.event_away_team; //timeB
        event_home = value.event_home_team; //timeA



        $('.timeA').html(event_home);
        $('.timeB').html(away_team);

    })
});

})

First I had a $.each go through the result, then a new $.each going into the node that I would wish to!

In case someone goes through the same problem as me, there’s the result.

Thanks in advance!