jQuery serializeArray() into new JSON array with individual items

Chris
May 27, 2024
106 views
0 votes
2 Answers

I am using jQuery serializeArray() and it successfully collects the engine form info. However, I need the info in an array so that each "engine" is an item in the new array. Engine 1, Engine 2 etc. Below is my foreach loop that delivers all the engines into the form (2 in this example), and then below that the output I get. How can I get that output in a new JSON array so I can iterate through each item? hope that makes sense.

    <form id="engine_data">
      <? foreach ($listing['engines'] as $k => $e) { ?>
      <div id="engines_cont" >
        <input type="hidden" name="engine_number" value="<?=$e['engine_no']?>" />

        <table class="info_table engine_edit">

            <colgroup>
                <col span="1">
                <col span="1" style="width: 100%;">
            </colgroup>

            <tbody>
                <tr>
                    <td class="cell_label">MAKE</td>
                    <td class="cell_info"><input id="" name="engine_make" type="text" placeholder="Engine Make" value="<?=$e['engine_make']?>"></td>
                </tr>
                <tr>
                    <td class="cell_label">ENGINE TIME</td>
                    <td class="cell_info"><input id="" name="engine_time" type="text" placeholder="Engine Time" value="<?=$e['engine_time']?>"></td>
                </tr>
                <tr>
                    <td class="cell_label">ENGINE TBO</td>
                    <td class="cell_info"><input id="" name="engine_tbo" type="text" placeholder="Engine TBO" value="<?=$e['engine_tbo']?>"></td>
                </tr>
                <tr>
                    <td class="cell_label">ENGINE NOTES</td>
                    <td class="cell_info"><input id="" name="engine_notes" type="text" placeholder="Engine Notes" value="<?=$e['engine_notes']?>"></td>
                </tr>

            </tbody>
        </table>
     </div>
   <? } ?>
   </form>



[
 {
  "name": "engine_number",
  "value": "1"
},
{
  "name": "engine_make",
  "value": "P&W"
},
{
  "name": "engine_time",
  "value": "1200"
},
{
  "name": "engine_tbo",
  "value": "2000"
},
{
  "name": "engine_notes",
  "value": "Great engine in good condition"
},
{
  "name": "engine_number",
  "value": "2"
},
{
  "name": "engine_make",
  "value": "P&W"
},
{
  "name": "engine_time",
  "value": "1500"
},
{
  "name": "engine_tbo",
  "value": "2200"
},
{
  "name": "engine_notes",
  "value": "Great engine in good condition"
}
]

Answers

Ids need to be unique so remove id="engines_cont" from your code or make it unique at least. (it seems to be no use in your code so you can remove it too)

Now you need to loop over your form input element to create the desired array.

Do it like below:

var arr = [];
// to get one div all input data in one-go for creating desired array
$('#engine_data div').each(function() { 
  var divObj = $(this);
  let obj = {};
  divObj.find('input').each(function() {
    obj[$(this).attr('name')] = $(this).val();
  });
  arr.push(obj);
});

It will provide output like this:

[
    {
        "engine_number": "1",
        "engine_make": "P&W",
        "engine_time": "1200",
        "engine_tbo": "2000",
        "engine_notes": "Great engine in good condition",
    },
    {
        "engine_number": "2",
        "engine_make": "P&W",
        "engine_time": "1500",
        "engine_tbo": "2200",
        "engine_notes": "Great engine in good condition",
    }
]

Working snippet:

var arr = [];

$('#engine_data div').each(function() {
  var divObj = $(this);
  let obj = {};
  divObj.find('input').each(function() {
    obj[$(this).attr('name')] = $(this).val();
  });
  arr.push(obj);
});
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
You need to use array naming convention in your HTML form like below:

<form id="engine_data">
  <div>
    <input type="hidden" name="engine_number" value="1" />

    <table class="info_table engine_edit">

      <colgroup>
        <col span="1">
        <col span="1" style="width: 100%;">
      </colgroup>

      <tbody>
        <tr>
          <td class="cell_label">MAKE</td>
          <td class="cell_info"><input id="" name="eengine_make" type="text" placeholder="Engine Make" value="P&W"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TIME</td>
          <td class="cell_info"><input id="" name="engine_time" type="text" placeholder="Engine Time" value="1200"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TBO</td>
          <td class="cell_info"><input id="" name="engine_tbo" type="text" placeholder="Engine TBO" value="2000"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE NOTES</td>
          <td class="cell_info"><input id="" name="engine_notes" type="text" placeholder="Engine Notes" value="Great engine in good condition"></td>
        </tr>

      </tbody>
    </table>
  </div>
  <div>
    <input type="hidden" name="engine_number" value="2" />

    <table class="info_table engine_edit">

      <colgroup>
        <col span="1">
        <col span="1" style="width: 100%;">
      </colgroup>

      <tbody>
        <tr>
          <td class="cell_label">MAKE</td>
          <td class="cell_info"><input id="" name="engine_make" type="text" placeholder="Engine Make" value="P&W"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TIME</td>
          <td class="cell_info"><input id="" name="engine_time" type="text" placeholder="Engine Time" value="1500"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TBO</td>
          <td class="cell_info"><input id="" name="engine_tbo" type="text" placeholder="Engine TBO" value="2200"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE NOTES</td>
          <td class="cell_info"><input id="" name="engine_notes" type="text" placeholder="Engine Notes" value="Great engine in good condition"></td>
        </tr>

      </tbody>
    </table>
  </div>
</form>

IDs need to be unique, so for now we cannot us that.

If we instead loop over the engines it will work

No need for jQuery.

const engines = Array.from(document.querySelectorAll('#engine_data div'))
  .map(engine => 
    Array.from(engine.querySelectorAll('input[name^=engine]'))
      .reduce((acc, input) => (acc[input.name] = input.value, acc), {})
  );

console.log(engines);

<form id="engine_data">
  <div id="engines_cont">
    <input type="hidden" name="engine_number" value="1" />

    <table class="info_table engine_edit">

      <colgroup>
        <col span="1">
        <col span="1" style="width: 100%;">
      </colgroup>

      <tbody>
        <tr>
          <td class="cell_label">MAKE</td>
          <td class="cell_info"><input id="" name="engine_make" type="text" placeholder="Engine Make" value="make1"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TIME</td>
          <td class="cell_info"><input id="" name="engine_time" type="text" placeholder="Engine Time" value="time1"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TBO</td>
          <td class="cell_info"><input id="" name="engine_tbo" type="text" placeholder="Engine TBO" value="tbo1"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE NOTES</td>
          <td class="cell_info"><input id="" name="engine_notes" type="text" placeholder="Engine Notes" value="notes1"></td>
        </tr>

      </tbody>
    </table>
  </div>
  <div id="engines_cont">
    <input type="hidden" name="engine_number" value="2" />

    <table class="info_table engine_edit">

      <colgroup>
        <col span="1">
        <col span="1" style="width: 100%;">
      </colgroup>

      <tbody>
        <tr>
          <td class="cell_label">MAKE</td>
          <td class="cell_info"><input id="" name="engine_make" type="text" placeholder="Engine Make" value="make2"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TIME</td>
          <td class="cell_info"><input id="" name="engine_time" type="text" placeholder="Engine Time" value="time2"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE TBO</td>
          <td class="cell_info"><input id="" name="engine_tbo" type="text" placeholder="Engine TBO" value="tbo2"></td>
        </tr>
        <tr>
          <td class="cell_label">ENGINE NOTES</td>
          <td class="cell_info"><input id="" name="engine_notes" type="text" placeholder="Engine Notes" value="notes2"></td>
        </tr>

      </tbody>
    </table>
  </div>

</form>

Please signup or login to give your own answer.

Click here to cancel reply.