Question

使用jquery append函数动态追加contact_info div中的html（可以存在多个联系人）。如何使用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));
}

从jquery附加的div生成json输出

1 个答案: