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

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

let data = { 
     /// create the structure here not as you do 
     'search':{ 
         'text':"blabla",  
         ... 
     },
     .... 
}
this.http.post(url, data);

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": ""
}

迭代您的Submit方法中的对象属性，如果该属性对您的辅助对象具有值，则设置属性和值：

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 : FormArray

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)

    }

  }