array type data return from ajax not working CI

Question

i have a car database integrated in my system now let me show you the code

AJAX

$('#year').change(function() {

        $year=$("#year option:selected").text();
        $('#make').html("");
        $('#model').html("");

        var obj={
            year:$year
        };

        $.ajax({
            type: 'post',
            url: '<?=base_url()?>Home/ajax_search_step1',
            dataType: 'json',
            data:obj,

            success: function (data) {
                $data=JSON.stringify(data);
                //alert("here");
                $.each(data, function(key, value) {
                    //var append='<option value='+value.id+'>'+value.name+'</option>';
                    alert(value.model_make_id);
                });
            }
        });
});

what happens is an year is passed as an argument to controller

MODEL

function ajax_search_step1($year){
        $query="SELECT DISTINCT model_make_id FROM `tbl_02_models`";
        $this->db->where("model_year" ,$year);
        $query=$this->db->query($query);
        return $query->result_array();
    }

Controller

public function ajax_search_step1()
    {
        $year=$this->input->post("year");
        $data['result']=$this->Car_search->ajax_search_step1($year);
        echo json_encode($data ,JSON_PRETTY_PRINT);
        exit();
    }

this is how php is returning the reponse!

    {
        "result": [
            {
                "model_make_id": "abarth"
            },
            {
                "model_make_id": "ac"
            },
            {
                "model_make_id": "acura"
            },
            {
                "model_make_id": "Alfa Romeo"
            },
            {
                "model_make_id": "alfa-romeo"
            }
    ]
}

now the issue is i am not able to print the object in javascript i tried many different solutions but none of them worked for me!

Answer 1

You cant use $.each for string data type

$('#year').change(function() {

        $year=$("#year option:selected").text();
        $('#make').html("");
        $('#model').html("");

        var obj={
            year:$year
        };

        $.ajax({
            type: 'post',
            url: '<?=base_url()?>Home/ajax_search_step1',
            dataType: 'json',
            data:obj,

            success: function (data) {

$data=JSON.parse(data);
$.each(data.results, function(key,  value) {
 //var append='<option value='+value.id+'>'+value.name+'</option>';
 alert(value.model_make_id);
                 });
                }
          });
    });

Try replacing your code with this

Answer 2

Try this code below.

You're missing data.result in each

var data = {"result": [{"model_make_id": "abarth"},{"model_make_id": "ac"},{"model_make_id": "acura"},{"model_make_id": "Alfa Romeo"},{"model_make_id": "alfa-romeo"}]};
     $.each(data.result, function(key, value) {
                    //var append='<option value='+value.id+'>'+value.name+'</option>';
                    alert(value.model_make_id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>