Funkcja AngularJS i JQuery $ .each() zwraca tylko ostatnią wartość pętli

Question

Pracowałem z AngularJS i zintegrowaną biblioteką JQuery w moim projekcie.

Używam funkcji $.each() JQuery do przechodzenia przez moją klasę. Chcę utworzyć tablicę obiektów z nim tak jak na poniższym formacie:

[ 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
] 

HTML

<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 

JS kontroler

$scope.saveData = function(){ 
    var arrayOFProducts = []; 
    var object = {}; 

    angular.element('.panels').each(function(){ 
      $(this).find('.form-control').each(function(){ 
       var key = $(this).attr('name'); 
       var value = $(this).val(); 
       object [key] = value; 
      }); 
      arrayOFProducts.push(object); 
    }); 

    console.log(arrayOFProducts); 

} 

Głównym problemem tutaj jest to, że otrzymuję te same wartości dla wszystkich obiektów json w tablicy. Wygląda na to, że tylko ostatnie wartości wejściowe są tworzone jako obiekt, a on wypycha go do tablicy 5 razy ..

Answer 1

Problem polega na tym, że po każdej iteracji trzeba zresetować przywracany obiekt do pustego stanu. zewnętrznej pętli. Wypróbuj to:

$scope.saveData = function() { 
    var arrayOFProducts = []; 

    angular.element('.panels').each(function() { 
     var obj = {}; // note this moved to here 

     $(this).find('.form-control').each(function() { 
      var key = $(this).attr('name'); 
      var value = this.value; 
      obj[key] = value; 
     }); 
     arrayOFProducts.push(object); 
    }); 

    console.log(arrayOFProducts); 
}