從HTML表單生成JSON

Question

我想在HTML表單上創建一個json：

<form enctype='application/json'>
  <input name='pet[0][species]' value='Dahut'>
  <input name='pet[0][name]' value='Hypatia'>
  <input name='pet[1][species]' value='Felis Stultus'>
  <input name='pet[1][name]' value='Billie'>
</form>

從上面的html中，我希望獲得以下json：

// produces
{
    "pet":  [
        {
            "species":  "Dahut"
        ,   "name":     "Hypatia"
        }
    ,   {
            "species":  "Felis Stultus"
        ,   "name":     "Billie"
        }
    ]
}

無需以下代碼：

  function serializeForm()
  {
    var jsonData = $('form').serializeArray();
    var jsonString = JSON.stringify(jsonData);
    $('#result').html(jsonString);
  }

但是，不幸的是，我得到了以下json：

[{"name":"pet[0][species]","value":"Dahut"},{"name":"pet[0][name]","value":"Hypatia"},{"name":"pet[1][species]","value":"Felis Stultus"},{"name":"pet[1][name]","value":"Billie"}]

Answer 1

您可以遍歷數組元素，並使用預期格式的數據構造一個對象，

let data = {};

$form.serializeArray().forEach(field => {

  // Work on the data here to get the expected result

});

return data;

但是，我認為，如果您願意在表單中添加一些額外的HTML，那么結果將是更可持續的代碼。

如果使用服務器端應用程序使用數據庫中的數據生成表單，則可以添加兩個數據字段，並使用它們以期望的格式提取數據，這樣可以正常工作。

 function serializeForm() { let jsonData = { pet: [] }, i = 0, $inputs = $('input[data-pet-id=' + i + ']'); while ($inputs.length) { let pet = { species: $inputs.filter('input[data-field="species"]').val(), name: $inputs.filter('input[data-field="name"]').val() }; jsonData.pet[i] = pet; i++; $inputs = $('input[data-pet-id=' + i + ']'); } console.log(jsonData); $('#result').html(JSON.stringify(jsonData)); } $('document').ready(() => { serializeForm(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id='my-form' enctype='application/json'> <input name='pet[0][species]' value='Dahut' data-pet-id="0" data-field='species'> <input name='pet[0][name]' value='Hypatia' data-pet-id="0" data-field='name'> <input name='pet[1][species]' value='Felis Stultus' data-pet-id="1" data-field='species'> <input name='pet[1][name]' value='Billie' data-pet-id="1" data-field='name'> </form> <div id="result">Working...</div> 

從長遠來看，如果您以編程方式生成HTML，則第二個解決方案應該更具可持續性。

Answer 2

這似乎是一個奇怪的JSON對象，但是如果您將輸入的name屬性中的某些信息分解為data屬性，可以采用以下方法：

 const petInputs = document.getElementsByName("pet"); const buildBtn = document.getElementById("build"); buildBtn.addEventListener("click", buildJSON); function buildJSON(){ // Defines `petsObj` for grouping information and `resultObj` for building result const petsObj = {}, resultObj = { pet: [] }; // Groups information by pet id# (separates unique pets from each other) for(let input of petInputs){ const type = input.dataset.type, id = input.dataset.id; if(!petsObj["id" + id]){ petsObj["id" + id] = {}; } petsObj["id" + id][type] = input.value; } // Counts the number of unique pets let petsCount = 0; for(let pet in petsObj){ petsCount++; } // Adds all pets to the `pet` property of the `json` object for(let i = 0; i < petsCount; i++){ resultObj.pet.push(petsObj["id" + i]); } // Prints and returns the JSON object console.log(resultObj); return(resultObj); } 

 <input name="pet" data-type="species" data-id="0" value='Dahut'> <input name="pet" data-type="name" data-id="0" value='Hypatia'><br /> <input name="pet" data-type="species" data-id="1" value='Felis Stultus'> <input name="pet" data-type="name" data-id="1" value='Billie'><br /> <button id="build">Build JSON</button> 

Answer 3

似乎目前瀏覽器不支持enctype ='application / json'（或其他任何與此有關的東西）。 根據我的理解，這只是對標准的建議，但由於安全/性能方面的考慮，它在大約4年前被廢棄了。

我也認為下面的代碼是一種更簡單的方法（只需一步即可完成）

$（'＃result'）。html（JSON.stringify（$（“＃form”）。serializeArray（）））;