CODEWITHSUNDEEP
htmlajaxjsoncodeigniter
NestedWeb
NestedWeb

Reputation: 1737

JSON to HTML (Codeigniter)

public function getCrew(){
    $search = $this->input->post('name');
    if($this->input->post('ajax') && (!empty($search))){
         $result = $this->model->getNames($search);
         foreach($result as $r){
            echo json_encode($r);
         }
    }
}

$(document).ready(function(){
$('#getMem').keyup(function(e){

    var name = {
        ajax: 1,
        name: $('#getMem').val()
    }

    $.ajax({
        url: 'work/getCrew',
        type: 'POST',
        data: name,
        dataType: 'json',
        success: function(data){
            $('#freshMem').html(data.first_name);
        },
        error: function(){
            alert('Error.');
        }
    });
});

 });

This works fine if the result from database returns only one row, if more than one generates error, can anyone please tell me how to solve this

Upvotes: 0

Views: 679

Answers (2)

Ryan
Ryan

Reputation: 14649

Use the Output class to tell the browser that JSON is being returned. The problem is that you are json_encodeing multiple objects in your foreach loop. Just json_encode the array returned from your model

    public function getCrew(){

        $search = $this->input->post('name');
        if($this->input->post('ajax') && (!empty($search))){
             $result = $this->model->getNames($search);

             $this->output
                         ->set_content_type('application/json')
                         ->set_output(json_encode(array("response" => $result)));
        }
    }
    $(document).ready(function(){
        $('#getMem').keyup(function(e){
        var name = {
            ajax: 1,
            name: $('#getMem').val()
        }

            $.ajax({
                url: 'work/getCrew',
                type: 'POST',
                data: name,
                dataType: 'json',
                success: function(data)
                {
                    var __html = '';

                    $.each(data.response, function (a, b) 
                    {

                        __html += '<p>'+b.first_name+'</p>';

                    });

                    $('#freshMem').html(__html);
                },
                error: function()
                {
                    alert('Error.');
                }
            });
        });
    });

Upvotes: 2

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Try this:

$.ajax({
        url: 'work/getCrew',
        type: 'POST',
        data: name,
        dataType: 'json',
        success: function(data){
             json_data = $.parseJSON(data);
                         $.each(json_data, function(i,item){
                           $('#freshMem').append(item.first_name);
            });
        },
        error: function(){
            alert('Error.');
        }
    });

You have to iterate over returned array.

Also you need to change your controller code:

public function getCrew(){
    $search = $this->input->post('name');
    if($this->input->post('ajax') && (!empty($search))){
         $result = $this->model->getNames($search);
         // assuming that $result is array...
         $json = json_encode($result);
         echo $json;
         /*foreach($result as $r){
            echo json_encode($r);
         }*/
    }
}

Upvotes: 0

Related Questions