Javascript json对象post请求的输入字段

所以我有一些可选的输入字段，我需要构建一个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>

应该使用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"); 

---

因此，我必须在发送对象之前手动构建它，这取决于您发送给它的系统。如果您发送一个空对象，并且该API中没有任何验证，那么该API将被调用，并且将被更正。关于形成对象，只需将其形成为js

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

---

我会使用一个表单，你会得到一个很好的对象，它有属性和值。然后也使用一个helper对象，检查表单对象，如果属性有值，那么将这些属性和相应的值插入helper对象，最后将其发送到后端

您可以使用被动表单或模板驱动表单。我自己喜欢使用反应式表单，因为它有一些很好的特性，而且您可以更好地控制表单。另外，由于您使用的是数组，模板驱动的表单实际上不支持数组。下面是一个反应形式的示例：

myForm:FormGroup；
构造函数（私有fb:FormBuilder）{
this.myForm=fb.group({
字段1:['']，
字段2:['']
})
}

模板：

提交

因此，在本例中提交时，您会得到如下对象：

{
“字段1”：“，
“字段2”：”
}

迭代submit方法中的对象属性，如果属性对帮助对象具有值，则设置属性和值：

onSubmit（值）{
设obj={}；
for（让道具插入值）{
//除非类型为“字符串”，否则不要尝试修剪
if（（值的类型[prop]=“string”））{
值[prop]=值[prop].trim（）；
}
//属性具有值、插入属性和辅助对象的值
if（值[prop].length）{
obj[prop]=值[prop]；
}
}
//将此对象发布到后端
控制台日志（obj）
}

这是一个带有上述代码的）

---

由于还涉及到数组，因此您需要研究反应形式以及如何在该反应形式中使用

FormArray

：

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

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，只需将其作为object发送，但我必须在发送之前手动构建它，如果字段为空，我不发送属性，不确定如何实现此问题我无法像这样形成它，因为api可能会在将来更改

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)

    }

  }