PHP - JSON到HTML

Question

I am trying to display json_encode data from my back end controller to view using together with AJAX. The AJAX runs successfully and received the response that I needed. However, i am unable to display out on my HTML.

I have double-checked that there is certainly a response coming from the back end. Please do help me.

AJAX jQuery

$.ajax({
        type: 'post',
        url: 'index.php/Status/facility',
        dataType: "json",
        data: {id:id},
        success: function (response) {

            var len = response.length;

            console.log(len);

        for(var i=0; i<len; i++){
            var id = response[i].facility_id;
            var username = response[i].name;

            var tr_str = "<li class='pointer' id='" + (i+1) + "' onclick='changeClass(this.id)'><a>" + name +"</a></li>";

            $("#tabAjax").append(tr_str);
        }

          $('#exampleModalCenter').modal('show'); 

        }
  }); 

HTML

<ul class="nav nav-pills" id="tabAjax"></ul>

Controller

public function facility(){
    echo json_encode($data);
    //$this->load->view('templates/student/footer');
}

Response

{"facility_list":[{"facility_id":"1","name":"Table 1","facility_category":"1"}]}

Answer 1

I believe you need to access the data within facility_list so to do so firstly get a reference to that level of the response data and then iterate through it's child objects

var json=response.facility_list;

for( var n in json ){
    var obj=json[n];

    var id=obj.facility_id;
    var name=obj.name;
    var cat=obj.facility_category;

    var tr_str = "<li class='pointer' data-category='"+cat+"' id='" + (n+1) + "' onclick='changeClass(this.id)'><a>" + name +"</a></li>";

    $("#tabAjax").append( tr_str );
}