PHP - JSON to 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"}]}

Professor Abronsius · Accepted Answer · 2018-01-15 07:38:53Z

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 );
}

answered Jan 15, 2018 at 7:38

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lel Over a year ago

oh great it work! Totally didn't know about the facility_list. Thanks!

SINGH · Accepted Answer · 2018-01-15 09:40:34Z

0

The best way to implement this handle it at backend. You can prepared html at backend and send prepared html in response(in any key of array) and append according that. That will be more easy to handle response and no need to reload page every time.

$response = array(array('facility_id' => 1, 'facility_category' => 2, 'name' => 'abc'));
$returnResponse = array('status' => 'false', 'data' => '');
$str = '';
foreach ($response as $key => $resp) {
$str .= '<li class="pointer" data-category="' . $resp['facility_category'] . '" id="' . ($key+1) . '" onclick="changeClass(this.id)"><a> ' . $resp['name'] . ' </a></li>';
}
$returnResponse['status'] = true;
$returnResponse['data'] = $str;

Now in js file you can use:-

var html = response.data;

and append above html where you want.

edited Jan 15, 2018 at 9:40

answered Jan 15, 2018 at 9:32

SINGH

3971 gold badge4 silver badges17 bronze badges

Collectives™ on Stack Overflow

PHP - JSON to HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related