從 jquery 附加 div 生成 json 輸出

Question

contact_info div 中的 html 是使用 jquery append 函數動態附加的（可以存在多個聯系人）。 如何使用 jquery 從輸入生成以下 json 格式？

{
   "Company":[
      {
         "company_name":"ABC Company",
         "contact_info":[
            {
               "contact_person":"Mr. ABC",
               "email":"abc@def.com"
            },
            {
               "contact_person":"Mr. XYZ",
               "email":"xyz@def.com"
            }
         ]
      }
   ]
}

<div class="form-group">
    <label>Company Name
    </label>
    <div class="col-md-5">
        <input name="company_name" id="company_name" type="text" class="form-control">
    </div>
</div>

<div id="contact_info">
    <div class="row">
        <div class="form-group">
           <div class="row">
                <label>Contact Person
                </label>
                <input name="contact_person" id="contact_person" type="text" class="form-control" maxlength="100">
                <label>Email
                </label>
                <input type="email" name="cp_email" id="cp_email" class="form-control" maxlength="100">
            </div>
        </div>
    </div>
</div>

Answer 1

<button onclick="addCompany()">Add Company</button>

- - - - - -腳本 - - - - - -

var company=[];
function addCompany()
{
  var pushed=0;
$.each(company, function(i, data) {

    if(data.company_name===$('#company_name').val())
    {

      company[i].contact_info.push({
               "contact_person":$('#contact_person').val(),
               "email":$('#cp_email').val()
            });
       pushed++;

      return false;

    }


});
if(pushed==0)
    {

      var obj={
    "company_name":$('#company_name').val(),
         "contact_info":[
            {
               "contact_person":$('#contact_person').val(),
               "email":$('#cp_email').val()
            }
            ]
};
company.push(obj);
    }

alert(JSON.stringify(company));
}