Получаю пустой массив после JSON.stringify

470

04 февраля 2017, 10:34

собственно вот код html

<div id="sheet" class="inner" style="display: block;">
    <div>
       <input id="size1" type="text">
    </div>
    <div>
         <input id="size2" type="text">
    </div>
</div>

javascript

$('body .frontend-setup-form #secure').click(function (e) {
    e.preventDefault();
    var json;
    var shirts = [];
    var shirt = [];
    $('body .frontend-setup-form #sheet input').each(function () {
        if($(this).val()!='') {
            shirt['name'] = $(this).attr('id');
            shirt['value'] = $(this).val();
            shirts.push(shirt);
        }
    });
   json={shirts:shirts}
   console.log(JSON.stringify(json));

получаю

{"shirts":[[]]}

хотелось бы

{
    "name":"patern",
    "shirt": [
        {
            "name": "size1",
            "value": "размер1"
        }, 
        {
            "name": "size2",
            "value": "размер2"
        }
    ]
}

Answer 1

Ошибка в типе переменной shirt.

В данном случае это массив. При сериализации массива с помощью JSON.stringify на выходе будет массив с количеством элементов соответствующих length.

Свойство length - это число, большее максимального индекса.

В данном случае, максимальный индекс в массиве 0, так как элементы в него не добавлялись.

Поэтому на выходе имеется пустой массив.

Для решения нужно заменить массив ([]), на объект ({})

var shirt = {};

А также необходимо внести определение переменной shirt внутрь цикла.

Чтобы не возникало проблемы со сторонними переменными, вместо each нужно использовать map, filter и get(для получения результата)

var shirts = $('input') 
  .filter(function() { 
    return this.value != '' 
  }) 
  .map(function() { 
    return { 
      name: $(this).attr('id'), 
      value: $(this).val() 
    } 
  }) 
  .get(); 
console.log(JSON.stringify(shirts));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="sheet" class="inner" style="display: block;"> 
  <div> 
    <input id="size1" type="text" value='123'> 
  </div> 
  <div> 
    <input id="size2" type="text"> 
  </div> 
</div>