如何遍历 json 对象并与 html 元素绑定。？

Question

我需要遍历来自控制器的 JSON 对象并将数据绑定到 html 元素。当我发出警报时，我正在获取对象。 如何遍历这些对象以访问单个数据，以便可以将其附加到 html 元素？

我尝试了以下代码。我这里只有几样东西做个demo，实际数组很大。

我的控制器：

     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>