JSON to HTML (Codeigniter)

Question

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

Object {first_name: "Aman", last_name: "Shahi"}, when the result is single row, after that it shows the ajax alert('error') — NestedWeb
– NestedWeb, Commented Nov 26, 2012 at 6:17
check my answer out. It would help if you can show what the JSON object looks like with multiple results — Ryan
– Ryan, Commented Nov 26, 2012 at 6:23

Ryan · Accepted Answer · 2012-11-26 08:49:31Z

2

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

edited Nov 26, 2012 at 8:49

answered Nov 26, 2012 at 6:16

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

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

6 Comments

NestedWeb Over a year ago

this is for an autocomplete. same first_name is repeating on every keyup, when .append is used. i tried with .html and .text but then only one name shows up. there is no error.

Ryan Over a year ago

show me what your json data looks like with multiple results. Also why don't you use the jquery autocomplete widget

NestedWeb Over a year ago

Object {first_name: "Aman", last_name: "Shahi"}, many objects like these. i'm learning ajax and json so jQuery alone is enough for me.

NestedWeb Over a year ago

with .append multiple results show up but previous ones don't disappear.

Ryan Over a year ago

okay so the only problem is that the other ones get appended below the previous ones. check my edit. it should work.

|

Kalpesh Patel · Accepted Answer · 2012-11-26 06:14:45Z

0

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

edited Nov 26, 2012 at 6:14

answered Nov 26, 2012 at 6:05

Kalpesh Patel

2,8202 gold badges28 silver badges54 bronze badges

1 Comment

Kalpesh Patel Over a year ago

Can you show me the returned data from server via ajax request?

Collectives™ on Stack Overflow

JSON to HTML (Codeigniter)

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related