Javascript добавить массивы в объект массива - проблема, выдвигая всегда одно и то же значение

Question

У меня проблема с кодом JavaScript: Я создаю форму с динамическим добавлением элементов и буду считать значения из этой формы

<div class="product" value="1">
  <br />
  <h4>Pytania dodatkowe lecz obowiązkowe :3</h4>    
  <div class="inputbox left-label required">
    <label for="price" class="rating">price</label>
    <div class="tint-rating" id="" data-input="price0" name="price" value="5"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="functionality" class="rating">Funcionality</label>
    <div class="tint-rating" data-input="functionality0" name="functionality" value="5"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="design" class="rating">Design</label>
    <div class="tint-rating" data-input="design0" name="design" value="5"></div>
  </div>   
</div>    
<div class="product" value="2">
  <br />
  <h4>Pytania dodatkowe lecz obowiązkowe :3</h4>    
  <div class="inputbox left-label required">
    <label for="price" class="rating">price</label>
    <div class="tint-rating" id="" data-input="price1" name="price" value="6"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="functionality" class="rating">Funcionality</label>
    <div class="tint-rating" data-input="functionality1" name="functionality" value="3"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="design" class="rating">Design</label>
    <div class="tint-rating" data-input="design1" name="design" value="8"></div>
  </div>    
</div>    
<div class="product" value="3">
  <br />
  <h4>Pytania dodatkowe lecz obowiązkowe :3</h4>    
  <div class="inputbox left-label required">
    <label for="price" class="rating">price</label>
    <div class="tint-rating" id="" data-input="price0" name="price" value="1"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="functionality" class="rating">Funcionality</label>
    <div class="tint-rating" data-input="functionality1" name="functionality" value="2"></div>
  </div>
  <div class="inputbox left-label required">
    <label for="design" class="rating">Design</label>
    <div class="tint-rating" data-input="design1" name="design" value="3"></div>
  </div>    
</div>

А это значения для чтения кода из формы:

var arr = [], rate = {};      
products = [{}];

$.each($('.product'), function(i, product) {    
  $('.tint-rating', product).each(function() {
    var x = $(this).attr("name")
       ,y = $(this).attr("value");     
    rate[x] = y;     
  });    
  products.push({rate});    //Move this line into inside the inner .each loop
});

Проблема заключается в том, что скрипт выдвигает элементы массива из элементов формы, но во всех только значениях из последнего (результат из примера):

0: {}
1:
rate: {price: "1", functionality: "2", design: "3"}
__proto__: Object
2:
rate: {price: "1", functionality: "2", design: "3"}
__proto__: Object
3:
rate: {price: "1", functionality: "2", design: "3"}
__proto__: Object
length: 4

Мне нужны значения из всех элементов моей формы, не только последний, например:

 0: {}
    1:
    rate: {price: "5", functionality: "5", design: "5"}
    __proto__: Object
    2:
    rate: {price: "6", functionality: "3", design: "8"}
    __proto__: Object
    3:
    rate: {price: "1", functionality: "2", design: "3"}
    __proto__: Object
    length: 4

Если кто-то знает, в чем проблема с моим сценарием, пожалуйста, помогите мне, Заранее большое спасибо!

Answer 1

Измените свой код так:

    products = [];
    $.each($('.product'), function(i, product) {    
      var item = {};
      $('.tint-rating', product).each(function() {
        item[$(this).attr("name")] = $(this).attr("value");
      });    
      products.push(item);
    });

Это должно дать вам:

    [{"price":5, "functionality":5, "design":5}
    ,{"price":6, "functionality":3, "design":8}
    ,{"price":1, "functionality":2, "design":3}]

@ Дин Маркетинг: Большое спасибо, это работает !! :))