Access to a json array value in Ajax

Question

I am working on a project in Laravel. I am doing a dynamic search function using Ajax and Json.

Function in the controller:

public static function busca_ajax()    
    {    
        $query = Input::get('query');    
        $resultados = Produto::busca($query);        
        foreach($resultados as $produto) {
            $imagem = $produto->imagens->first();    
            if(!$imagem) {    
                $imagem = $produto->base->imagens->first();    
                if(!$imagem) {    
                    $imagem = '';    
                }    
            }    
            $produto->imagem = $imagem;
        }    
        return Response::json($resultados);         
    } 

The function is to search for products. It searches a product from the content typed by the user. Then for each of these products it looks for his image: first if the product has variations; if not, find, search the base product; if not, add "";

The function finds the products, but some error occurs when adding the images in the json array, because when I try to get the value in the ajax return, it gives a value "Undefined".

Full javascript function:

    function checkprod(val) {

    if (val.length >= 3) {

        $('.loading').fadeIn();

        var request = $.ajax({

                url: baseurl+"/produtos/ajax_busca_produto",

                type: "POST",

                data: { query: val },

                dataType: "json"

            });



            request.done(function(data) {


                x = '<br><br> <h6>Clique em um produto para selecioná-lo.</h6><table class="pure-table pure-table-bordered table-hovers"><thead><tr>';

                x += '<th width="30%">-</th><th>Nome</th>';

                x += '</tr></thead><tbody>';

                for (var i in data){


                    //navego pelas chaves do array como um for

                    x += '<tr style="cursor: pointer;" class="hover-effect">';

                    x += '<td onClick="completeFieldProduct('+data[i].id+',\''+data[i].nome_completo+'\')"><img src="'+baseurl+'/../uploads/medium/'+data[i].imagem+'" style="width:70px" /></td>';
                    x += '<td>'+data[i]+'</td>';

                    x += '<td onClick="completeFieldProduct('+data[i].id+',\''+data[i].nome_completo+'\')">'+data[i].nome_completo+'</td>';

                    x += '</tr>';

                }

                x += '</tbody></table>';

                $("#complete").html(x);

                $('.loading').fadeOut();

            });     

    }

    else {

        $("#complete").html('');

    }

} 

Imaging method():

public function imagens()
    {
        return $this->morphMany('ProdutoImagem', 'imageable');
    }

Note: The project is already ready and I didn’t do it. I’m just trying to fix this function.