How to go through the values of an [Object Object]

Question

I need to get the values of each key inside one loop. The values are in "Blocks":

[  
   {  
      "estado":"Ceará",
      "cidade":"Fortaleza",
      "nome_revendedor":"Zélia",
      "telefone":"85 9999999",
      "email":"[email protected]"
   },
   {  
      "estado":"São Paulo",
      "cidade":"Carjai",
      "nome_revendedor":"Zezé",
      "telefone":"85 9999999",
      "email":"[email protected]"
   }
]

What I already have is basically a SVG map that has links. These links have a class calling for .state. The idea is that by clicking on the status bring your respective information:

 $('.estado').click(function(e) {
     e.preventDefault();
     var estado = $(this).attr('xlink:href');
     $.ajax({
             url: 'servo.php',
             type: "POST",
             dataType: "json",
             data: { estado: estado }
         })
         .done(function(data) {    
             $.each(data, function(i, obj) {
                 $("#titulo").html("Revedendor: " + JSON.stringify(obj.revendedor));    
             }) 


         });
     return false;
 });

I can get the information through a request and for testing purposes I created two array and converted to json, mas o objetivo é criar um loop através de uma consulta SQL e alimentar a variável $return_arr[$date][]:

<?php
if (is_ajax()) {

    if (isset($_POST["estado"]) && !empty($_POST["estado"])) { //Checks if action value exists
        $key_estado = $_POST["estado"];
        buscar($key_estado);
    }
}

//Function to check if the request is an AJAX request
function is_ajax()
{
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function buscar($key_estado)
{

    $return_arr = array();
    $date       = 'revendedor';

    $arr        = array(
        "estado" => "Ceará",
        "cidade" => "Fortaleza",
        "nome_revendedor" => "Zélia",
        "telefone" => "85 999999",
        "email" => "[email protected]"
    );

    $gg = array(
        "estado" => "São Paulo",
        "cidade" => "Carjai",
        "nome_revendedor" => "Zélia",
        "telefone" => "85 999999",
        "email" => "[email protected]"
    );

    $return_arr[$date][] = $gg;
    $return_arr[$date][] = $arr;

    echo json_encode(array(
        "revendedor" => $return_arr
    ));
}
?>

Example:

Estado: 
Cidade:
Revendedor:
Telefone: 
Email: 


Estado: 
Cidade:
Revendedor:
Telefone: 
Email: 

Estado: 
Cidade:
Revendedor:
Telefone: 
Email: 

...

Answer 1

There are different ways to show this data, but creating a table can be done like this:

jsFiddle:

var json = JSON.parse('[ { "estado":"Ceará", "cidade":"Fortaleza", "nome_revendedor":"Zélia", "telefone":"85 9999999", "email":"[email protected]" }, { "estado":"São Paulo", "cidade":"Carjai", "nome_revendedor":"Zezé", "telefone":"85 9999999", "email":"[email protected]"} ]');


var table = document.createElement('table');
document.body.appendChild(table);

var titulos = Object.keys(json[0]);
var tr = document.createElement('tr');
table.appendChild(tr);

titulos.forEach(function(titulo) {
    var th = document.createElement('th');
    th.innerHTML = titulo;
    tr.appendChild(th);
});

json.forEach(function(obj) {
    var tr = document.createElement('tr');
    Object.keys(obj).forEach(function(prop) {
        table.appendChild(tr);
        var td = document.createElement('td');
        td.innerHTML = obj[prop];
        tr.appendChild(td);
    });
    table.appendChild(tr);
});

td, th {
    border: 1px solid #ccf;
    padding: 10px;
}
th {
    background-color: #aac;
}

https://jsfiddle.net/q2brfps6/