ajaxコールで.eachを使用する方法

Question

このコードを実行すると、$。each（...）。doneという関数が実行されないというコンソールエラーが表示されます。レコードをデータベースに挿入するためにポストしているPHPコードは、データベース内のファイル名がわかるように動作しています。私はエラーを止めるために私のループを修正する必要がありますが、ここで何が間違っているのかは分かりません。

$("#edit_pic").on("click", function (e) { 
     e.preventDefault(); 
     var files = $('input[name="file"]').val() 
     var data = JSON.parse(files) 
    } 

    $.each(data, function (index, item) { 

     $.ajax({ 
      url: 'functions/add-support-images.php', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       data: item.file_name 
      }, 
      beforeSend: function() { 
       $("#edit_pic").prop("disabled", true).html("Uploading..."); 
      }, 
     }); 
    }) 

    .done(function (data) { 
     if (!data.success) { 
      console.log(data.message); 


     } else { 

      console.log(data.message); 

     } 

    }) 

PHP：

$response = array(); 
      $id = filter_var($_POST['id'], FILTER_SANITIZE_NUMBER_INT); 
      $stmt = $link->prepare("INSERT INTO `product_images` (`pic_name`,`product_id`) VALUES (?, ?)"); 
      $stmt->bind_param("si", $_POST['data'], $id); 
      $stmt->execute(); 
      $stmt->close(); 


     $response['success'] = true; 
     $response['message'] = "success"; 

Answer 1

が$.ajax後に.doneを移動してみてください：

$("#edit_pic").on("click", function (e) { 
    e.preventDefault(); 
    var files = $('input[name="file"]').val() 
    var data = JSON.parse(files) 
} 

$.each(data, function (index, item) { 

    $.ajax({ 
     url: 'functions/add-support-images.php', 
     type: 'POST', 
     dataType: 'json', 
     data: { 
      data: item.file_name 
     }, 
     beforeSend: function() { 
      $("#edit_pic").prop("disabled", true).html("Uploading..."); 
     }, 
    }).done(function (data) { 
     if (!data.success) { 
      console.log(data.message); 


     } else { 

      console.log(data.message); 

     } 

    }); 
}); 

編集

あなたが見るであろう上記のコードで、コメントで述べたように成功のメス個別に送信されるので、各アイテムのセージ。

let items = []; 

$.each(data, function (index, item) { 
    items.push({data: item.file_name}); 
}); 

$.ajax({ 
    url: 'functions/add-support-images.php', 
    type: 'POST', 
    dataType: 'json', 
    data: items, 
    beforeSend: function() { 
     $("#edit_pic").prop("disabled", true).html("Uploading..."); 
    }, 
}).done(function (data) { 
    if (!data.success) { 
     console.log(data.message); 
    } else { 
     console.log(data.message); 
    } 
}); 

注：これはおそらく挿入する項目の配列を受け入れるようにPHPコードの更新が必要となるのではなく、 AJAX呼び出しに送信されたすべてのアイテムを持っているために、あなたはこのような何かを行うことができます単一項目。