Как перебирать объекты json и связывать с html elemnts.?

Question

Мне нужно перебирать объекты JSON, исходящие от моего контроллера, и связывать данные с элементами html. Когда я предупреждаю, что я получаю объекты. Как я могу перебирать эти объекты, чтобы получить доступ к отдельным данным, чтобы я мог добавить их в элементы html?

Я пробовал следующие коды. У меня просто несколько элементов здесь для демонстрации, фактический массив очень большой.

Мой контроллер:

 public function grid_view_ajax_function() 
      {  
       $contacts_details=""; 
       $this->load->model('contact_model'); 
       $contacts_details= $this->contact_model->get_all_contacts(); 
       $result = array(); 
       $data = array(); 
       foreach ($contacts_details as $row_data){ 
       $data['id']     =$row_data['contact_id']; 
       $data['image']    =$row_data['image']; 
       $data['name']    =$row_data['first_name']; 
       $data['last_name']   =$row_data['last_name'];  
       array_push($result, $data); 

       } 
       echo json_encode(array('data' => $result)); 
      } 

main.js файл перебрать объектов в JQuery:

  $.getJSON(global_base_url + "contact/grid_view_ajax_function",function(data) 
      { 
      var div_data = ''; 
       $.each(data,function(i,data) 
       {  

    div_data +='<div class="col-xl-15" data-id="'+data.index+'"><div class="panel"><div class="panel-heading"><img src="../asset/'+data.picture+'" class="img-responsive desaturate" /></div><div class="panel-body"><div class="name">'+data.name+'</div><div class="email">'+data.email+'</div><div>'; 
       }); 

JSON данные:

{ 
    "data":[ 
    { 
    "id":"1", 
    "image":"4.jpg", 
    "name":"Mack ", 
    "last_name":"Jack", 
    "title":"Adminstration", 
    "city":"London" 
    }, 
    { 
    "id":"2", 
    "image":"person-list.png", 
    "name":"Renia", 
    "last_name":"Jack", 
    "title":"Archetectuer" 
    } 
] 
} 

Answer 1

Вы можете перебирать как

//here ajax response object is assigned to data variable 
 
var data = {"data":[{"id":"1","image":"4.jpg","name":"Mack ","last_name":"Jack","title":"Adminstration","city":"London"},{"id":"2","image":"person-list.png","name":"Renia","last_name":"Jack","title":"Archetectuer"}]}; 
 

 
var div_data = ''; 
 
$.each(data.data,function(i,data) { 
 

 
    div_data += "<li>"+data.name+"</li>"; 
 
    
 
}); 
 
$("ul").html(div_data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul></ul>