我无法获得数组 json 响应

Question

I am trying to send with PHP and jQuery an array response, but it is not working my PHP code is:

public function get(Request $request)
{
    $pre_images = Pre_Image::all();

    foreach ($pre_images as $pre_image) {
        $data[] = array("file" => $pre_image->image);
    }

    echo json_encode($data);
}

It creates the array and I encode it to be sent. Then my jQuery is:

$( 'body' ).on( "click", '#add_value', function() {
    $.ajax({
        type: 'POST',
        url: '/pre_image/get',
        success:function(files)
        {
            var len = files.length;

            var values = '';

            for(var i=0; i<len; i++){
                values = values + '<div class="col-md-3">'+ files[i].file +'<div class="col-md-3">';
            }

            $(".values").append('<div class="row" style="padding-left:20px; padding-right:20px;"><div class="col-md-3"><div class="form-group"><br><label class="control-label mb-10">Nombre de las Opciones (Ejem: Rojo, Azul.)</label><input type="text" class="form-control" name="value_name"></div></div><div class="col-md-3"><div class="form-group"><br><label class="control-label mb-10">Opciones (Ejem: 38, 39, 40.)</label><input type="text" class="form-control" name="value_name"></div></div><div class="col-md-6"><div class="form-group"><br><label class="control-label mb-10">Imagenes </label>'+values+'</div></div></div>');
        }
    });

    return false;
});

I get the response in the success but the first problem that I get it's when I use files.length; it counts 37 and it should count 1 because in this moment the database just has one record, but it is count the leght of the word I mean 272621621287272.jpg it is count how length is the word.

The second problem that I get it's that I use to read the array, and it returns me undefined. How is it possible if it has a record stored in the array which it comes from PHP response.

I hope you can help me Thanks.jquery

Answer 1

Because jquery is not parsing the json into the object.

There couple ways to say you are expecting json response to jquery.

First one is you should tell you are expecting an json response with dataType

$.ajax({
    type: 'POST',
    url: '/pre_image/get',
    dataType: 'json' ,
    success:function(files)
    // and so on

Or another way is add Content-Type = application/json to response header. In this way jquery will guess your data type.

in laravel you can do this using json method of response class instead of encoding your data manually.

public function get(Request $request)
{
    $pre_images = Pre_Image::all();

    foreach ($pre_images as $pre_image) {
        $data[] = array("file" => $pre_image->image);
    }

    return response()->json($data);
}

Or you can manually parse your json response using JSON library. I don't recommend this way. Ajax able to parse json response unless you tell him you are expecting one. No need to parse manually

success(json) {
    var files = JSON.parse(json);
    var values = '';
    files.forEach(function(file){
        values += <div class="col-md-3">'+ file +'<div class="col-md-3">
    })

    $(".values").append('<div class="row" style="padding-left:20px; padding-right:20px;"><div class="col-md-3"><div class="form-group"><br><label class="control-label mb-10">Nombre de las Opciones (Ejem: Rojo, Azul.)</label><input type="text" class="form-control" name="value_name"></div></div><div class="col-md-3"><div class="form-group"><br><label class="control-label mb-10">Opciones (Ejem: 38, 39, 40.)</label><input type="text" class="form-control" name="value_name"></div></div><div class="col-md-6"><div class="form-group"><br><label class="control-label mb-10">Imagenes </label>'+values+'</div></div></div>');

}