actually here is the html code

<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));

getting

 {"shirts":[[]]}

I would like to

 { "name":"patern", "shirt": [ { "name": "size1", "value": "размер1" }, { "name": "size2", "value": "размер2" } ] }
  • Give a minimal, self-sufficient and reproducible example , because with this piece of code cut off from the context we cannot do anything ( but no, Grundy could :) - andmalmal
  • @andreymal do you need html? or what is not clear? - Sergalas
  • It's pretty obvious that the code is tied to html, so without it, of course, there is no way - andreymal
  • #secure there is no idy - L. Vadim
  • @ L.Vadim you put the whole page including a link to which you do a click? - Sergalas

1 answer 1

An error in the type of the shirt variable.

In this case, it is an array. When serializing an array using JSON.stringify, the output will be an array with the number of elements corresponding to length .

The length property is a number greater than the maximum index.

In this case, the maximum index in the array is 0 , since no elements were added to it.

Therefore, the output has an empty array.

To solve, you need to replace the array ( [] ) with the object ( {} )

 var shirt = {};

It is also necessary to define the variable shirt inside the loop.

To avoid problems with third-party variables, instead of each you need to use map , filter and get (to get the result)

 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>

  • I tried to do it through the object as follows $('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+={name:shirt['name'],value:shirt['value']} } }); json={shirts:shirts} console.log(JSON.stringify(json)); nothing happened either - Sergalas
  • @Sergalas, where did you get this code? what a strange use of an array with the += operator += ? Where did you see that I said that this part should be changed? Look carefully in my answer, what exactly I said need to be replaced and what? In the code in the commentary - you made it unclear what, and it is not clear how this applies to my answer, except for one word object ? - Grundy
  • @Sergalas, I highlighted the place where the solution was described. - Grundy
  • well corrected for if($(this).val()!='') { shirt={'name':$(this).attr('id')}; shirt={'value':$(this).val()}; shirts.push(shirt); } if($(this).val()!='') { shirt={'name':$(this).attr('id')}; shirt={'value':$(this).val()}; shirts.push(shirt); } if($(this).val()!='') { shirt={'name':$(this).attr('id')}; shirt={'value':$(this).val()}; shirts.push(shirt); } why didn't I get the name? - Sergalas
  • @Sergalas, the answer is obvious: just think what your code does. Let me guess, did you use php before? - Grundy