Question

所以我有一些可选的输入字段，我需要构建一个json对象，然后将其发送到http.post。可选意味着如果字段为空，那么我也不会将它添加到json属性中。以下是输入字段。

<input type="text" [(ngModel)]="searchQuery" placeholder="Keyword">

     <div class="row">
        <div class="col-lg-6">
            <p-calendar id="kera" [(ngModel)]="startDate" dateFormat="yy-mm-dd" placeholder="Start date" [showIcon]="true"></p-calendar>
        </div>
        <div class="col-lg-6">
            <p-calendar id="kera" [(ngModel)]="endDate" dateFormat="yy-mm-dd" placeholder="End date" [showIcon]="true"></p-calendar>
        </div>
    </div>

将发送给http的期望对象应如下所示：

  "search": {
    "scope": [2, 3, 32],
    "type": "basic",
    "text": {
      "value": searchQuery, //string variable coming from UI

    },

    "date": {
      "type": "range",
      "from": startDate, //string variable coming from UI
      "to": endDate //string variable coming from UI
    }
  }

应该使用json.prase吗？或者应该是类似的东西，

 var search = {};
 search.text = { value: "", fields: [] };
 {value: "", fields: Array(0)}
 seach.text.value = "tom";
 search.text.value = "tom";
 search.text.fields.push("subject");
 search.text.fields.push("body");

所以我必须在发送之前手动构建对象

Answer 1

这取决于您发送给它的系统。如果您发送一个空对象并且该API中没有任何验证，那么API将被调用并且它将被纠正。关于形成对象只是将其形成为js

SELECT DISTINCT wet.wkf_ebp_document_serial, Count(werf.wkf_ebp_registry_file_serial) AS reg, sb.branch_name,
  ncb.batch_title, ncb.nhif_claims_batch_serial, Count(ncbn.nhif_claims_notification_serial) AS claimsnotificationcount,
  ncb.total_applied_amount, ncb.total_approved_amount, ncb.total_bill_amount, nhif_hospitals.hospital_name,
  wet.document_name, ncb.batch_from_date, ncb.batch_to_date, nhif_claims_notifications.date_added
FROM wkf_ebp_table wet
  INNER JOIN wkf_ebp_registry_files werf ON werf.wkf_ebp_document_serial = wet.wkf_ebp_document_serial
  INNER JOIN system_branches sb ON wet.system_branch_serial = sb.system_branch_serial
  INNER JOIN nhif_claims_batches ncb ON ncb.nhif_claims_batch_serial = wet.nhif_claims_batch_serial
  INNER JOIN nhif_claims_batch_notifications ncbn ON ncbn.nhif_claims_batch_serial = ncb.nhif_claims_batch_serial
  INNER JOIN nhif_hospitals ON nhif_hospitals.system_branch_serial = sb.system_branch_serial AND
    ncb.nhif_hospital_serial = nhif_hospitals.nhif_hospital_serial
  INNER JOIN nhif_claims_notifications ON
    ncbn.nhif_claims_notification_serial = nhif_claims_notifications.nhif_claims_notification_serial
WHERE (nhif_claims_notifications.date_added BETWEEN $P{START_DATE} AND $P{END_DATE} AND nhif_hospitals.hospital_name LIKE
  '%$P!{HOSPITAL_NAME_SUB}%') OR (sb.branch_name LIKE '%$P!{BRANCH_NAME_SUB}%')
GROUP BY wet.wkf_ebp_document_serial, sb.branch_name, ncb.batch_title, ncb.nhif_claims_batch_serial,
  ncb.total_applied_amount, ncb.total_approved_amount, ncb.total_bill_amount, nhif_hospitals.hospital_name,
  wet.document_name, ncb.batch_from_date, ncb.batch_to_date, nhif_claims_notifications.date_added
ORDER BY wet.wkf_ebp_document_serial

Answer 2

我会使用一个表单，你得到一个带有属性和值的好对象。然后还使用辅助对象，检查表单对象，如果属性具有值，则将具有相应值的那些属性插入到辅助对象中，最后将其发送到后端。

您可以使用反应形式或模板驱动形式。我喜欢自己使用反应形式，因为它有一些很好的功能，你可以更好地控制你的形式。此外，由于您使用的是数组，因此模板驱动的表单实际上并不支持。以下是反应形式的样本：

myForm: FormGroup;

constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      field1: [''],
      field2: ['']
    })
}

模板：

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
  <input formControlName="field1">
  <input formControlName="field2">
  <button type="submit">Submit</button>
</form>

所以在这种情况下提交时，你得到一个像这样的对象：

{
  "field1": "",
  "field2": ""
}

如果属性对助手对象有值，则在提交方法中迭代对象属性，设置属性和值：

onSubmit(values) {
  let obj = {};
  for(let prop in values) {
    // do not try to trim unless type is 'string'
    if((typeof values[prop] == 'string')) {
      values[prop] = values[prop].trim();
    }
    // property has value, insert property and value to helper obj
    if(values[prop].length) {
      obj[prop] = values[prop];
    }
  }
  // post this object to your backend
  console.log(obj)
}

以上代码为 StackBlitz ：）

由于您还涉及到数组，因此您需要查看被动形式以及如何在该被动形式中使用FormArray：https://angular.io/guide/reactive-forms

Answer 3

好的，一个优雅的解决方案是手动创建一个对象：

var searchObj = { 
  "search": {
  "scope": [2, 3, 32],
  "type": "basic",
  "date": {
    "type": "range",
    "from": "", 
    "to" : "" 
  },
  "text": {
  value: "", fields: [],
  },
  "HasAttachmentsOnly": hasAttachments,

}
};


searchObj.search.text.value = searchQuery;
searchObj.search.date.from = startNumber;
searchObj.search.date.to = endNumber; 


if (body){
searchObj.search.text.fields.push("body");
}
if (subject){
  searchObj.search.text.fields.push("subject");
  }
  if (attachName){
    searchObj.search.text.fields.push("attachmentname");
    }
    if (attachCont){
      searchObj.search.text.fields.push("attachmentcontent");
      }



  return this.http.post('/api/search/', 
  searchObj
 ).map(data => data)

    }

  }

输入json对象发布请求的字段

3 个答案: