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)

    }

  }