在AJAX响应中插入JSON值

时间:2017-04-19 03:58:58

标签: jquery json datatables

我动态填充表格,当我尝试连接或插入一个从控制器获取的JSON值时,我遇到了问题。我想插入此值,因为我需要显示一个图像,所以我插入一个带有来自JSON的路径的HTML标记。这是我的代码。

控制器

public function consultaProd2(Request $request)
{
    $almacenes = Almacen::orderBy('nombre')->lists('nombre', 'id'); 
    $fechas = explode(' ', $request['RangoFecha']);
    $fechaInicial = $fechas[0].' 00:00:00';
    $fechaFinal = $fechas[2].' 23:59:59';

    $productos = Producto::whereBetween('created_at', [$fechaInicial, $fechaFinal])
                     ->where('almacen_id', '=', $request['Almacen'])
                     ->get();
    return response()->json($productos);
}

脚本



<script type="text/javascript">
    function llenar(response, index, value)
    {
        $('#example1').DataTable({
            "destroy": true,
            "data": response,
            "scrollX": true,
            "columns":[
                {"data":"img"},
                {"data":"id"},
            ]

        });
    }
</script>

<script type="text/javascript">
    function consultaProducto(){
        var tablaDatos = $('#datos');
        var token = $("#token").val();
        var route = '<?= url('producto/consultaProducto') ?>'
        var data = {};
        data.Almacen = $('select[name=Almacen]').val();
        data.RangoFecha = $('input[name=RangoFecha]').val();
                $.ajax({
                    url: route,
                    headers: {'X-CSRF-TOKEN': token},
                    data: data,
                    method: 'POST',
                    statusCode: {
                        400: function() {
                        }
                    }
                }).done(function(response){
                    $.each(response, function(index, value){
                        if(response[index].pathImg == null)
                            var img = "/documento/valach/noimg.png";
                        else
                            var img = response[index].pathImg;
                        var img = "/documento/valach/noimg.png";
                        response[index].img = "<img src="+img+">";
                        //console.log(response);
                        llenar(response, index, value);
                    });

                }).fail(function(response){
                }); 
            }
        }
        return false;
    }
&#13;
&#13;
&#13;

例如,如果查询得到3个数组并且我打印id它只显示信息而没有任何错误,但当我使用data:img时,我插入的值是,它会抛出我以下错误,之后填充表格并显示图像。

Error image here

并且随着信息的到来,行会增加,但如果我在查询中只获得1个数组,则会填充表而不会出现任何错误。希望你能帮助我,谢谢。

1 个答案:

答案 0 :(得分:0)

你在循环中调用llenar(),即每次迭代一次。你应该在循环结束后调用它。当你(或其他人)在3周内重新调查代码时,你应该使用一些{ }来避免混淆:)

$.each(response, function(index, value){
  var img;
  if (response[index].pathImg == null) {
   img = "/documento/valach/noimg.png";
  } else {
   img = response[index].pathImg;
  }
  //var img = "/documento/valach/noimg.png"; ???
  response[index].img = "<img src="+img+">";
});
llenar(response, index, value);