Get all input values from each table

Question

I want to get all the values of the inputs of each table in the body to later use it as json. I tried in various ways but only manage to read the first row of each table. I also tried with .serialize and .serializeArray but the result it complicates my reading a bit.

html code: https://jsfiddle.net/ogakn9mz/

jquery code:

function newattr(){
    
    var attr_tag,opt_name,opt_price,opt_stock;
    
    $('body').find('table').each(function() {
    
      attr_tag = $(this).closest("div").find('input[name="attr_name"]').val();
      
      opt_name = $(this).find('input[name="opt_name"]').val();
      opt_price = $(this).find('input[name="opt_price"]').val();
      opt_stock = $(this).find('input[name="opt_stock"]').val();
      
      console.log(attr_tag+'/'+opt_name+'/'+opt_price+'/'+opt_stock);

    });
      
}

Desired result:

{
    "attributes": [
      {
        "attr_name": "Size",  
        "data":[
          {
          "opt_name": "Small",
          "opt_price": "11",
          "opt_stock":"22"
          },
          {
          "opt_name": "Medium",
          "opt_price": "33",
          "opt_stock":"44"
          }
        ]
      },
      {
        "attr_name": "Color",  
        "data":[
          {
          "opt_name": "Blue",
          "opt_price": "55",
          "opt_stock":"66"
          }
        ]
      }
    ]
}

user_10606400 · Answer

You need to loop through attributes div then inside this iterate through your table and push your value of input in JSON Object and finally pass them to JSON Array .

Demo Code :

var outer = {}; //for outer array
outer["attributes"] = new Array()
//loop through attributes div
$('body').find('.attributes').each(function() {
  var attribute_name = $(this).find('input[name="attr_name"]').val()
  var data = [] //for all table
  //loop through table tr
  $(this).find(".options_table tbody tr").each(function() {
    opt_name = $(this).find('input[name="opt_name"]').val();
    opt_price = $(this).find('input[name="opt_price"]').val();
    opt_stock = $(this).find('input[name="opt_stock"]').val();
    data.push({
      "opt_name": opt_name,
      "opt_price": opt_price,
      "opt_stock": opt_stock
    }) //push data in data array

  })

  outer["attributes"].push({
    "attr_name": attribute_name,
    "data": data //passs here
  })
});
console.log(outer)

Get all input values from each table

1 Answers