Here are the Dynamically generated Fields. For sort of Simplicity, I have removed unnecessary codes Please help me to generate an Array of JSON Object when I click on a button

<div class="row sertile">
                          
              <input type="hidden"  value="Service">
              <input type="hidden"  value="144">
              <input type="hidden"  value="Full face">
              <input type="hidden"  value="200">
              <input type="hidden"  value="0">
              <input type="hidden"  value="30">

  </div>

<div >
                          
              <input type="hidden"  value="Service">
              <input type="hidden"  value="124">
              <input type="hidden"  value="Half face">
              <input type="hidden"  value="200">
              <input type="hidden"  value="0">
              <input type="hidden"  value="30">

  </div>

I need output as:

[
 {
  parType: 'Service', 
  id: 144,
  serviceName: 'Full Face',
  ...
 }, 
 {
  parType: 'Service', 
  id: 124,
  serviceName: 'Half Face',
  ...
 },
 ...
]

CodePudding user response：

I have found a way to tackle this. Thank you all for your help.

        function createJSON() {
          jsonObj = [];
          $(".sertile").each(function() {

            var id = $(this).find("#serId").val();
            var name = $(this).find("#serName").val();

            item = {}
            item["title"] = id;
            item["email"] = name;

            jsonObj.push(item);
          });

          console.log(jsonObj);
        }

CodePudding user response：

You can try using Array.prototype.map() like the following way:

//attach click event to button
document.querySelector('#btnGenerate').addEventListener('click', function(){
  //get all rows
  var rows = document.querySelectorAll('.row.sertile');
  //loop through them using map(), generate and return the object
  var res = [...rows].map(el => {
    return ({
        parType: el.querySelector('.parType').value,
        id:  el.querySelector('.id').value,
        serviceName: el.querySelector('.serviceName').value,
        mrp:  el.querySelector('.mrp').value,
        dis:  el.querySelector('.dis').value,
        dur:  el.querySelector('.dur').value
      });
  });
  //log the result
  console.log(res);
})

<div class="row sertile">

    <input type="hidden" class="form-control parType" value="Service">
    <input type="hidden" class="form-control id" value="144">
    <input type="hidden" class="form-control serviceName" value="Full face">
    <input type="hidden" class="form-control mrp" value="200">
    <input type="hidden" class="form-control dis" value="0">
    <input type="hidden" class="form-control dur" value="30">

</div>

<div class="row sertile">

    <input type="hidden" class="form-control parType" value="Service">
    <input type="hidden" class="form-control id" value="124">
    <input type="hidden" class="form-control serviceName" value="Half face">
    <input type="hidden" class="form-control mrp" value="200">
    <input type="hidden" class="form-control dis" value="0">
    <input type="hidden" class="form-control dur" value="30">

</div>

<input type="button" id="btnGenerate" value="Generate"/>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Have you tried using Element.getElementsByClassName() ?

An idea might be to add a tag to your div and to get them by getElementsByClassName on the document, then to loop over them to get each field by it's class and to add it to an object that you can then convert to string json if you need to